一、组件的使用

创建组件的方式：Vue.component("自定义组件名"，{模板、数据、方法...});
下面是简单的组件模板使用示例

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>组件的使用</title>
</head>
<body>
<!-- 挂载点 -->
<div id="app">
<!-- 直接像html标签一样输入组件名称 -->
  <my-component></my-component>
</div>
<script src="js/vue.min.js"></script>
<script>
  //创建组件，my-component为自定义组件名称
  Vue.component("my-component",{
      template:"<div>这里是组件内容</div>"
  })
  //Viemodel
    var vm = new Vue({
        el: "#app"
    })
</script>
</body>
</html>

二、父子组件

1.数据传递

props：接收与$emit：传递


父：在模板写上子组件标签，标签绑定:自定义属性=要传的值

//父组件
    Vue.component("parent",{
        data:function(){
            return {data:"我要传到子组件"}
        },
        template:"<div><child :value='data'></child></div>"//value为自定义属性，data为要传的值
    });

子：使用props:["父组件命名的属性名"]直接获取

    //子组件
    Vue.component("child",{
        props:["value"],//子组件获取父组件传的值
        template:"<div>{{value}}</div>",
        mounted:function(){
            console.log(this.value);//我要传到子组件
        }
    })


父：创建一个方法接收子组件的数据，该方法的参数==子组件的数据；模板写上子组件标签，标签绑定@自定义事件名='接收数据的方法名'，方法的参数就是获取到的数据

//父组件
    Vue.component("parent",{
        data:function(){
            return {data:""}
        },

        template:"<div><child @get='getChildData'></child></div>",//@get为自定义事件名，传入方法getChildData
        methods:{
            getChildData:function(data){
                //参数data为子组件传来的值
                this.data=data;
                console.log(this.data);
            }
        }
    });

子：通过$emit方法：this.$emit("自定义的事件名","要传的值")

    //子组件
    Vue.component("child",{
        data:function(){
            return {val:"我是传到父组件的数据"}
        },
        mounted:function(){
            this.$emit("get",this.val);
        }
    })

2.相互获取data

$parent：父与$refs：子


父：在模板写上子组件标签，设置属性ref="命名"，关键字$ref，可直接通过this.$refs.命名.子组件data来获取子组件的数据

//父组件
    Vue.component("parent", {
        data: function () {
            return {unames: ["小明", "小红", "小狗"]}
        },
        template: `
        <div>
          <h3>父组件</h3>
            <ul>
              <li v-for="(uname,i) in unames">
                {{uname}}
              </li>
            </ul>
          <child ref="mySon"></child>
        </div>
      `,
        mounted: function () {
            this.unames.push(this.$refs.mySon.data)//获取子组件的数据添加到父组件的unames数组;
        }
    });

子：保存好数据老实等着父组件获取

    //子组件
    Vue.component("child", {
        data: function () {
            return {data: "我是子组件的数据"}
        }
    });


父：在模板写上子组件标签，设置属性ref="自定义命名"

//父组件
  Vue.component("parent",{
      data:function(){
          return {unames:["小明","小红","小狗"]}
      },
      template:`
        <div>
          <child ref="mySon"></child><!-- 给子组件加上ref属性：自定义命名 -->
        </div>
      `
  });

子：关键字$parent，可直接通过this.$parent.父组件的data来获取父组件的数据

  //子组件
  Vue.component("child",{
      template:`
        <div>
          <h3>子组件</h3>
          <ul>
            <li v-for="(uname,i) in this.$parent.unames">
              {{uname}}
            </li>
          </ul>
        </div>
      `,
      mounted:function(){
          console.log(this.$parent.unames);
      },
  });

三、兄弟组件

创建一个公共vue对象

//创建一个vue公共对象
    var v = new Vue();

例子：老大向老二发消息

$on：接收与$emit：传递

//老大
    Vue.component("lao-da", {
        data: function () {
            return {msg: "小偷来啦！"}
        },
        methods: {
            sendMsg: function () {
              //v.emit("自定义名"，"要传的数据")
                v.$emit("send", this.msg);
            }
        },
        template: `
        <div>
          <h3>老大</h3>
          <button @click="sendMsg">发送消息给老二</button>
        </div>
      `
    });
//老二
    Vue.component("lao-er", {
        mounted: function () {
            v.$on("send", function (msg) {
                console.log("老大发来的消息"+msg);
            })
        }
    })
© 允许规范转载