[笔记][转]vue.js原生组件化开发（二）—— 父子组件

前言

在了解父子组件之前应先掌握组件开发基础。在实际开发过程中，组件之间可以嵌套，也因此生成父子组件。

一、父子组件创建流程
1.构建父子组件
1.1 全局注册
(1)构建注册子组件

//构建子组件child
var child = Vue.extend({
    template: '<div>这是子组件</div>'
});
//注册名为'child'的组件
Vue.component('child',child);

(2)构建注册父组件

//构建父组件parent,在其中嵌套child组件
var parent = Vue.extend({
    template: '<div>这是父组件<child></child></div>'
});
Vue.component('parent',parent);

(3)定义vue实例

var app = new Vue({
    el: '#app'
})

(4)使用父组件

<div id="app">
    <parent></parent>
</div>

打开浏览器查看

1.2 局部注册
(1)构建子组件

var child = Vue.extend({
    template: '<div>这是子组件</div>'
});

(2)构建父组件
在父组件中局部注册子组件

var parent = Vue.extend({
    template: '<div>这是父组件<child></child></div>',
    components:{
        'child':child
    }
});

(3)定义vue实例
在vue实例中局部注册父组件

var app = new Vue({
    el: '#app',
    components:{
        'parent':parent
    }
})

(4)使用父组件

<div id="app">
    <parent></parent>
</div>

2.父子组件间通信
2.1 父传子
父组件传消息到子组件使用<code>props</code>，并且这传递是单向的，只能由父组件传到子组件。我们将上面例子中的父组件增加一个数据传递到子组件中渲染显示。如果父组件需要传多个数据给子组件，依次在后面加即可。
(1)在父组件中增加data，并绑定到子组件上

var parent = Vue.extend({
    template: '<div>这是父组件<child :pdata=data></child></div>',
    data(){
        return{
            data:'这是父组件传来的数据'
        }
    },
    components:{
        'child':child
    }
});

其中<code><child :pdata=data></child></code>，<code>:pdata</code>是<code>v-bind:pdata</code>的缩写，<code>pdata</code>是自定义传递的父组件数据的命名，子组件中也是用该名字获取数据，<code>data</code>是父组件中数据的命名。

(2)在子组件中通过props获取数据，并渲染出来

var child = Vue.extend({
    template: '<div>这是子组件 {{pdata}}</div>',
    props:['pdata']
});

查看浏览器

PS：父组件中数据发生变化，子组件中自动更新
子组件不可直接修改通过<code>props</code>获取到的父组件中的数据（vue会报错）。

2.2 子传父
子组件给父组件传值通过<code>emit</code>。父组件需在子组件标签上绑定 emit 事件。
例子：
(1)构建子组件

var child = Vue.extend({
    template: '<div><button @click="change">点击给父组件传值</button></div>',
    methods:{
        change: function(){
            this.$emit('posttoparent',10)
        }
    }
});

在这里，子组件按钮绑定了一个 click 点击事件，当点击按钮执行 change() 方法，该方法触发 emit 事件，事件名为 posttoparent ，并且带了一个参数10。

(2)构建父组件

var parent = Vue.extend({
    template: '<div>来自子组件的值为：{{datafromchild}} <child v-on:posttoparent="getfromchild"></child></div>',
    data(){
        return{
            datafromchild:''
        }
    },
    components:{
        'child':child
    },
    methods: {
        getfromchild: function(val){
            this.datafromchild = val
        }
    }
});

父组件接收emit事件通过v-on指令，格式为：v-on:emit方法名="父组件方法"
父组件通过自定义的 getfromchild() 方法来获取父组件 v-on 绑定的 emit 事件所传的参数。
父组件将接收到的参数赋值给 datafromchild
查看浏览器：

3.兄弟组件间通信
兄弟组件间通信也是用的emit。但原生vue.js需要新建一个空的vue实例来当桥梁。
下面直接贴代码

//新建一个空的vue实例bus
var bus = new Vue();

var myCom1 = Vue.extend({
    template: '<div><button @click="change">点击给兄弟组件传值</button></div>',
    methods:{
        change: function(){
            //通过空实例去触发emit
            bus.$emit('posttobro',10)
        }
    }
});

var myCom2 = Vue.extend({
    template: '<div>来自兄弟组件的值为：{{datafrombro}}</div>',
    data(){
        return{
            datafrombro:''
        }
    },
    mounted:function(){
      //接收emit事件
        bus.$on('posttobro',function(val){
            this.datafrombro = val
        }.bind(this))
    }
});

Vue.component('my-com1',myCom1);
Vue.component('my-com2',myCom2);

var app = new Vue({
    el: '#app'
});

使用组件

<div id="app">
    <my-com1></my-com1>
    <my-com2></my-com2>
</div>

查看浏览器：

---

来源：简书