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 父傳子

父組件傳消息到子組件使用props，而且這傳遞是單向的，只能由父組件傳到子組件。咱們將上面例子中的父組件增長一個數據傳遞到子組件中渲染顯示。若是父組件須要傳多個數據給子組件，依次在後面加便可。
(1)在父組件中增長data，並綁定到子組件上

var parent = Vue.extend({
    template: '<div>這是父組件<child :pdata=data></child></div>',
    data(){
        return{
            data:'這是父組件傳來的數據'
        }
    },
    components:{
        'child':child
    }
});

其中<child :pdata=data></child>，:pdata是v-bind:pdata的縮寫，pdata是自定義傳遞數據的命名，子組件中也是用該名字獲取數據，data是父組件中數據的命名。
(2)在子組件中經過props獲取數據，並渲染出來

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

查看瀏覽器

父組件中數據發生變化，子組件中自動更新
子組件不可直接修改經過props獲取到的父組件中的數據

下面咱們經過一個例子更好的理解上面兩句話
(1)使用<template>標籤建立子組件
爲方便書寫，咱們使用<template>標籤建立組件

<template id="child">
    <div>
        <p>這是子組件</p>
        <table>
            <tr>
                <td>name</td>
                <td>{{name}}</td>
                <td><input type="text" v-model="name"></td>
            </tr>
            <tr>
                <td>age</td>
                <td>{{age}}</td>
                <td><input type="text" v-model="age"></td>
            </tr>
        </table>
    </div>
</template>

這裏使用v-model指令來雙向綁定從父組件中獲取到的數據
(2)使用<template>標籤建立父組件

<template id="parent">
    <div>
        <p>這是父組件</p>
        <table>
            <tr>
                <td>name</td>
                <td>{{name}}</td>
                <td><input type="text" v-model="name"></td>
            </tr>
            <tr>
                <td>age</td>
                <td>{{age}}</td>
                <td><input type="text" v-model="age"></td>
            </tr>
        </table>
        //給子組件傳遞2個數據
        <child :name="name" :age="age"></child>
    </div>
</template>

(3)構建子組件

var child = Vue.extend({
    template: '#child',
    props:['name','age']
});

(4)構建父組件

var parent = Vue.extend({
    template: '#parent',
    data(){
        return{
            age:16,
            name:'喬巴'
        }
    },
    components:{
        'child':child
    }
});

查看瀏覽器

接着，咱們在父組件中修改輸入框的值，這會引發v-model綁定的值變化，同時也會改變子組件中的值

而後咱們試着修改子組件中輸入框的值，vue會警告不能直接修改父組件傳過來的值。

若是咱們須要修改從父組件中props傳過來的值，最好一開始把這個值賦給另一個data。

var child = Vue.extend({
    template: '#child',
    props:['name','age'],
    data(){
        return{
            name1: '',
            age1: ''
        }
    },
    //頁面掛載時將props的值賦給子組件中的data
    mounted:function(){
        this.name1 = this.name
        this.age1 = this.age
    },
    //同時增長監聽，當props的值發生變化時，也當即賦值給子組件的data
    watch:{
        name:function(val){
            this.name1 = this.name
        },
        age:function(val){
            this.age1 = this.name
        }
    }
});

同時修改v-model綁定的name值爲name1，age爲age1
如今修改子組件中的值，就不會報錯了，這是由於子組件中修改的是name1，並非props傳遞過來的name值

2.1 子傳父

子組件給父組件傳值經過emit。父組件需在子組件標籤上綁定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方法名="父組件方法"

父組件將接收到的參數賦值給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>

查看瀏覽器