vue第三篇之组件

全局组件

html代码

<div id="app">
    <!-- 使用自定义组件 -->
    <my-home></my-home>
</div>
<!-- 模板 -->
<template id="home">
    <div>
        <span>我是组件</span>
    </div>
</template>

js代码

<!-- 声明模板 -->
var Home = {
    template: "#home"
 };
 <!-- 注册全局组件 -->
 Vue.component("my-home", Home);
 new Vue({
    el: "#app",
 });

局部组件

html代码

<div id="app">
    <my-home></my-home>
</div>
<template id="home">
    <div>
        <span>我是组件</span>
    </div>
</template>

js代码

var Home = {
    template: "#home"
};
new Vue({
el: "#app",
/* 注册局部组件 */
components: {
    "my-home": Home
}
});

非父子组件之间的通信

使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件

html代码

<div id="app">
    <com-a></com-a>
    <com-b></com-b>
    <com-c></com-c>
</div>

<!-- 模板com-a -->
<template id="com-a">
    <div>
        <span>我是A组件</span>->{{a}}
        <input type="button" value="把A数据给C" @click="change">
    </div>
</template>

<!-- 模板com-b -->
<template id="com-b">
    <div>
        <span>我是B组件</span>->{{a}}
        <input type="button" value="把B数据给C" @click="rang">
    </div>
</template>

<!-- 模板com-c -->
<template id="com-c">
    <div>
        <span>我是C组件</span>->{{a}}->{{b}}
    </div>
</template>

js代码

<!-- 创建一个空的vue实例中央事件总线 -->
var Event = new Vue();
var A = {
    template: '#com-a',
    data(){
        return {
            a: '我是A数据'
        }
    },
    methods: {
        change(){
            <!-- 触发a-data -->
            Event.$emit('a-data',this.a)
        }
    }
};
var B = {
    template: '#com-b',
    data(){
        return{
            a: '我是B数据'
        }
    },
    methods: {
        rang(){
            <!-- 触发b-data -->
            Event.$emit('b-data',this.a)
        }
    }
};
var C = {
    template: '#com-c',
    data(){
        return {
            a: '',
            b: ''
        }
    },
    mounted(){
        var _self = this;
        <!-- 监听a-data -->
        Event.$on('a-data',function(a){
           _self.a = a;
        });
        <!-- 监听b-data -->
        Event.$on('b-data',function(a){
            _self.b = a;
        });
    }
};
var vm = new Vue({
    el: '#app',
    components: {
        'com-a': A,
        'com-b': B,
        'com-c': C
    }
});

父子组件

html代码

<div id="app">
    <fa-tem></fa-tem>
</div>

<!-- 父组件 -->
<template id="father_tem">
    <div>
        <span>我是父组件</span>
        <ch-tem></ch-tem>
    </div>
</template>

<!-- 子组件 -->
<template id="child_tem">
    <div>
        <span>我是子组件</span>
    </div>
</template>

js代码

new Vue({
    el: "#app",
    components: {
        "fa-tem": {
            template: "#father_tem",
            components: {
                "ch-tem": {
                    template: "#child_tem"
                }
            }
        }
    }
});

父子组件之间的通信

子组件要显式地用 props 选项声明它期待获得的数据：
使用 v-bind，每当父组件的数据变化时，该变化也会传导给子组件

html代码

<div id="app">
    <fa-tem></fa-tem>
</div>

<!-- 父组件 -->
<template id="father_tem">
    <div>
        <span>我是父组件</span>->{{a}}
        <!-- 在使用子组件时需要将父组件的数据和子组件绑定 -->
        <ch-tem :msg="a"></ch-tem>
    </div>
</template>

<!-- 子组件 -->
<template id="child_tem">
    <div>
        <span>我是子组件</span>->{{msg}}
    </div>
</template>

js代码

new Vue({
el: "#app",
    components: {
        "fa-tem": {
            data(){
                return{
                    a: "hello"
                }
            },
            template: "#father_tem",
            components: {
                "ch-tem": {
                    <!-- 使用props将父组件的数据传递给子组件 -->
                    props: ['msg'],
                    template: "#child_tem"
                }
            }
        }
    }
});

slot分发内容

<slot> 元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素。

html代码

<div id="app">
    <slot-a>
        <!-- 使用具名slot aaa 这时数据使用本身的数据 -->
        <h1 slot="aaa">11</h1>
        <!-- <h1 slot="bbb">22</h1> -->
    </slot-a>   
</div>

<template id="slot_a">
    <div>
        <!-- 具名slot aaa -->
        <slot name="aaa">我是aaa数据</slot>
        <!-- 具名slot bbb -->
        <slot name="bbb">我是bbb数据</slot>
        <span>我是默认数据</span>
    </div>
</template>

js代码

new Vue({
    el: "#app",
    components: {
        "slot-a": {
            template: "#slot_a"
        }
    }
});