Vue.js 组件 | 易学教程

全局组件：

注册一个全局组件语法

Vue.component(tagName, options)

tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件

<tagName></tagName>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<style>
  .base{color:#fff}
  .pink{background:pink}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="demo">
<!--  调用组件-->
  <cyy></cyy>
</div>

<script>
  //注册组件
  Vue.component("cyy",{
    template:"<p>这是cyy的御用组件</p>"
  })
  new Vue({
    el:'#demo'
  });
</script>

局部组件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<style>
  .base{color:#fff}
  .pink{background:pink}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="demo">
<!--  调用组件-->
  <cyy></cyy>
</div>

<script>
  //注册组件
  var child={
    template:"<p>这是cyy的御用组件鸭</p>"
  }

  new Vue({
    el:'#demo',
    components:{
      //局部组件child只在全局组件cyy下使用有效
      "cyy":child
    }
  });
</script>

prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。

父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<style>
  .base{color:#fff}
  .pink{background:pink}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="demo">
<!--  调用组件-->
  <cyy text="这是cyy传递的数据"></cyy>
</div>

<script>
  //注册组件
  Vue.component("cyy",{
    //传递数据到template中
    props:["text"],
    template:"<p>{{text}}</p>"
  })

  new Vue({
    el:'#demo'
  });
</script>

类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<style>
  .base{color:#fff}
  .pink{background:pink}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="demo">
<!--  调用组件-->
  <!--  数据名text  数据值来自mydata-->
  <cyy v-bind:text="mydata"></cyy>
</div>

<script>
  //注册组件
  Vue.component("cyy",{
    //传递数据到template中
    props:["text"],
    template:"<p>{{text}}</p>"
  })

  new Vue({
    el:'#demo',
    data:{
      mydata:"这是可以双向绑定的数据哈"
    }
  });
</script>

使用 v-bind 指令将 name 传到每一个重复的组件中：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<style>
  .base{color:#fff}
  .pink{background:pink}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="demo">
<!--  调用组件-->
  <!--  数据名text  数据值来自names-->
  <cyy v-for="name in names" v-bind:text="name.n"></cyy>
</div>

<script>
  //注册组件
  Vue.component("cyy",{
    //传递数据到template中
    props:["text"],
    template:"<p>{{text}}</p>"
  })

  new Vue({
    el:'#demo',
    data:{
      names:[
        {n:"cyy1"},
        {n:"cyy2"},
        {n:"cyy3"}
      ]
    }
  });
</script>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<style>
  .base{color:#fff}
  .pink{background:pink}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="demo">
<!--  调用组件-->
  <ul>
    <!--  数据名text  数据值来自names-->
    <cyy v-for="name in names" v-bind:text="name.n"></cyy>
  </ul>
</div>

<script>
  //注册组件
  Vue.component("cyy",{
    //传递数据到template中
    props:["text"],
    template:"<li>{{text}}</li>"
  })

  new Vue({
    el:'#demo',
    data:{
      names:[
        {n:"cyy1"},
        {n:"cyy2"},
        {n:"cyy3"}
      ]
    }
  });
</script>

注意: prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来

组件可以为 props 指定验证要求。

为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<style>
  .base{color:#fff}
  .pink{background:pink}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="demo">
<!--  调用组件-->
  <ul>
    <!--  数据名text  数据值来自names-->
    <cyy v-bind:text1="name"></cyy>
  </ul>
</div>

<script>
  //注册组件
  Vue.component("cyy",{
    //传递数据到template中
    props:{
      text1:Number,// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
      text2:[String,Number],// 多个可能的类型
      text3:{// 必填的字符串
        type:String,
        required:true
      },
      text4:{// 带有默认值的数字
        type:Number,
        default:1000
      },
      text5:{// 带有默认值的对象
        type:Object,
        default:function(){// 对象或数组默认值必须从一个工厂函数获取
          return {message:"hello~"}
        }
      },
      text6:{// 自定义验证函数
        validator:function(data){
          // data这个值必须匹配下列字符串中的一个
          return ["html","css","js"].indexOf(data)!==-1
        }
      }


    },
    template:"<li>{{text1}}</li>"
  })

  new Vue({
    el:'#demo',
    data:{
      name:"111"
    }
  });
</script>

当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。

type 可以是下面原生构造器：

String
Number
Boolean
Array
Object
Date
Function
Symbol

type 也可以是一个自定义构造器，使用 instanceof 检测

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件

即：

使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件

以下是使用自定义事件进行双向绑定

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="demo">
<!--  调用组件-->
  <div id="parent">
    <p>parent: {{ pNum }}</p>
<!--    接收子元素触发的事件-->
    child: <child v-on:cdoing="pCount"></child>
  </div>
</div>

<script>
  //注册组件
  Vue.component("child", {
    template: '<button v-on:click="cCount">{{ cNum }}</button>',
    data: function () {
      return {
        cNum: 0
      }
    },
    methods: {
      cCount: function () {
        this.cNum += 1
        //子元素触发事件
        this.$emit("cdoing")
      }
    },
  })

  new Vue({
    el: '#parent',
    data: {
      pNum: 0
    },
    methods: {
      pCount: function () {
        this.pNum += 1
      }
    }
  })
</script>

这里我犯了一个错误，就是触发事件时，我自定义的事件名里包含了大写字母：

this.$emit("cdoing")

结果程序一直错误，调试很久才发现原来$emit()这个事件名中不可以包含大写字母！！！！

真是血的教训！！！

如果你想在某个组件的根元素上监听一个原生事件。可以使用 .native 修饰 v-on

<my-component v-on:click.native="doTheThing"></my-component>

上面例子中，可以看到 button-counter 组件中的 data 不是一个对象，而是一个函数

data: function () {
      return {
        cNum: 1
      }
    }

这样的好处就是每个实例可以维护一份被返回对象的独立的拷贝，如果 data 是一个对象则会影响到其他实例

下面是data作为函数的情况，可以看到父组件的点击数是所有子组件的点击数之和

而如果是对象的话，则一个元素的操作会影响其他所有的元素

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="demo">
<!--  调用组件-->
  <div id="parent">
    <p>parent: {{ pNum }}</p>
<!--    接收子元素触发的事件-->
    child1: <child v-on:cdoing="pCount"></child>
    child2: <child v-on:cdoing="pCount"></child>
    child3: <child v-on:cdoing="pCount"></child>
  </div>
</div>

<script>
  var cNumObj={
    cNum: 0
  }
  //注册组件
  Vue.component("child", {
    template: '<button v-on:click="cCount">{{ cNum }}</button>',
    // data: function () {
    //   return {
    //     cNum: 0
    //   }
    // },
    data: function () {
      return cNumObj
    },
    methods: {
      cCount: function () {
        this.cNum += 1
        //子元素触发事件
        this.$emit("cdoing")
      }
    },
  })

  new Vue({
    el: '#parent',
    data: {
      pNum: 0
    },
    methods: {
      pCount: function () {
        this.pNum += 1
      }
    }
  })
</script>

来源：https://www.cnblogs.com/chenyingying0/p/12396502.html

标签

vue