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