vue-cli教程(三) 組件

關於組件，vuejs的官網裏面有很詳細的說明，其中組件之間的通信徹底適用於vue-cli

官網地址：https://cn.vuejs.org/v2/guide/

組件的使用

    1.組件的建立*.vue

    大概格式：

        <template>   <!-- 以這個開頭 -->

                <div> .... <!---  template下只能有一個 子節點，不然會報錯 --->

                </div>

        </template><!-- 以這個結尾 -->

        <script>

        </script>

        <style (scoped)>

         </style>

組件加入到父組件中：先import，再在父組件的 components中加入

import Study_3 from './Study_3.vue'
    export default{
        name:"MyComponent",
        components:{
            Study_3
        },
        methods:{
        },
    }

頁面的html部分：

<template>
    <div>
        這個是個人組件
        <Study_3></Study_3>
    </div>
</template>

組件間的參數共享：

        1.父組件傳子組件，這個比較簡單

        父組件中：

<Study_3 title="123"></Study_3>

動態綁定

<Study_3 v-bind:title="my_title"></Study_3>

data:function(){
    return {
        my_title:123456
    }
}

        子組件中：定義須要監聽的屬性

props:['title'],

        監聽完，就可使用 watch，computed，等方法，也能夠用 this.title獲取值

        2.子組件傳父組件：父組件須要監聽事件

         子組件，添加父組件的方法：

push_parent:function () {
   this.$emit("to_parent",1,2)
}

         父組件：

<Study_3 v-bind:title="my_title" v-on:to_parent="parent_accept"></Study_3>  <!-- 調用函數 parent_accept 不要加括號 ----->

methods:{
    parent_accept:function (a,b) {
        alert("parent_get");
        alert(a);
        alert(b);
    }
},

        3.跨組件調用：

        使用vuex