vue.js原生组件化开发（二）——父子组件

前言

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

父子组件创建流程

1.构建父子组件

1.1 全局注册

(1)构建注册子组件

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

(2)构建注册父组件

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

Vue.component('parent',parent);

(3)定义vue实例

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

(4)使用父组件

打开浏览器查看

1.2 局部注册

(1)构建子组件

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

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

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

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

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

(4)使用父组件

2.父子组件间通信

2.1 父传子

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

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

其中，:pdata是v-bind:pdata的缩写，pdata是自定义传递数据的命名，子组件中也是用该名字获取数据，data是父组件中数据的命名。
(2)在子组件中通过props获取数据，并渲染出来

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

查看浏览器

父组件中数据发生变化，子组件中自动更新
子组件不可直接修改通过props获取到的父组件中的数据

下面我们通过一个例子更好的理解上面两句话
(1)使用