Vue-组件及组件间的通信方式

定义组件的方式

1）什么是组件？
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码
组件是自定义元素（也相当于对象）

2）定义组件的方式
方式1：先创建组件构造器，然后由组件构造器创建组件

<div id="app">
    <hello></hello>
</div>

<script type="text/javascript">
    //  方式1先创建组件构造器，然后由组件构造器创建组件
    //1.使用Vue.extend创建一个组件构造器
    var MyComponent = Vue.extend({
        template:'
Hello World
'
    });
    //2.使用Vue.component根据组件构造器来创建组件
    Vue.component('hello',MyComponent);
    var vm = new Vue({//这里的vm也是一个组件,称为根组件
        el:"#app"
    })
</script>

方式2：直接创建组件

<div id="app">
    <world></world>
</div>

<script type="text/javascript">
    // 方式2：直接创建组件
    Vue.component('world',{
        template:'
你好世界
'
    });
     var vm = new Vue({//这里的vm也是一个组件,称为根组件
        el:"#app"
    })
</script>

组件的分类

分类：
全局组件：可以在所有vue实例中使用

<div id="app">
    <my-hello></my-hello>
</div>

<script type="text/javascript">
    // 全局组件：可以在所有vue实例中使用
    Vue.component('my-hello',{
        template:'
{{name}}
',
        data:function(){//在组件中存储数据时,必须以函数形式,函数返回一个对象
            return {
                name:'alic'
            }
        }
    });
</script>

局部组件：局部组件:只能在当前vue实例中使用

<div id="app">
    <my-world></my-world>
</div>

<script type="text/javascript">
    //局部组件:只能在当前vue实例中使用
    var vm = new Vue({
        el:"#app",
        components:{
            'my-world':{
                template:'
welcome to my-world age:{{age}}
',
                data(){
                    return {
                        age:24
                    }
                }
            }
        }
    })
</script>

引用模板和动态组件

1）引用模板
将组件内容放到模板template中并引用

<div id="app">
    <my-hello></my-hello>
    <template id="wbs">
        <!-- template必须有且只有一个根元素div -->
        <div>
            <h3>{{msg}}</h3>
            <ul>
                <li v-for="value in arr">{{value}}</li>
            </ul>
        </div>
    </template>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        components:{
            'my-hello':{
                name:'wbs17022',//指定组件名字，默认为标签名，可以不设置
                template:'#wbs',
                data(){
                    return {
                        msg:"welcome to my-hello",
                        arr:['tom','jack']
                    }
                }
            }
        }
    })
</script>

2）动态组件（内置组件）
component :is=""组件
多个组件使用同一个挂载点，然后动态的在它们之间切换
/component组件

<div id="app">
    <button  @click="flag='my-hello'">显示hello组件</button>
    <button @click="flag='my-world'">显示world组件</button>
    <div>
        <component :is="flag"></component>
    </div>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            flag:'my-hello'
        },
        components:{
            'my-hello':{
                template:'
我是hello组件:{{x}}
',
                data(){
                    return {
                        x:Math.random()
                    }
                }
            },
            'my-world':{
                template:'
我是world组件:{{y}}
',
                data(){
                    return {
                        y:Math.random()
                    }
                }
            }
        }
    })
</script>

组件间数据传递

1）父子组件
在一个组件内部定义另一个组件，称为父子组件
子组件只能在父组件内部使用
默认情况下，子组件无法访问父组件中的数据，每个组件实例的作用域是独立的

<div id="app">
    <my-hello></my-hello>
</div>
<template id="hello">
    <div>
        <h3>我是hello父组件</h3>
        <h3>访问自己的数据：{{msg}}，{{name}}，{{age}}，{{user.username}}</h3>
        <hr>
        <!-- 子组件只能在父组件内部使用 -->
        <my-world></my-world>
    </div>
</template>
<template id="world">
    <div>
        <h3>我是world子组件</h3>
    </div>
</template>

<script type="text/javascript">
    var vm = new Vue({//根组件
        el: "#app",
        components: {
            'my-hello': {//父组件
                data() {
                    return {
                        msg: 'test',
                        name: 'tom',
                        age: 18,
                        user: { id: 1, username: 'user1' }
                    }
                },
                template: '#hello',
                components: {
                    'my-world': {//子组件：在一个组件内部定义另一个组件，称为父子组件
                        template: '#world'
                    }
                }
            }
        }
    })
</script>

2）组件间数据传递 （通信）
2.1）子组件访问父组件的数据
a)在调用子组件时，绑定想要获取的父组件中的数据
b)在子组件内部，使用props选项声明获取的数据，即接收来自父组件的数据
总结：父组件通过props向下传递数据给子组件
注：组件中的数据共有三种形式：data、props、computed

<div id="app">
    <my-hello></my-hello>
</div>
<template id="hello">
    <div>
        <h3>我是hello父组件</h3>
        <h3>访问自己的数据：{{msg}}，{{name}}，{{age}}，{{user.username}}</h3>
        <hr>
        <!-- 子组件只能在父组件内部使用 -->
        <my-world :message="msg" :name="name"></my-world>
    </div>
</template>
<template id="world">
    <div>
        <h3>我是world子组件</h3>
        <h4>访问父组件中的数据：{{message}}，{{name}},{{age}}</h4>
    </div>
</template>

<script type="text/javascript">
    var vm = new Vue({//根组件
        el: "#app",
        components: {
            'my-hello': {//父组件
                data() {
                    return {
                        msg: 'test',
                        name: 'tom',
                        age: 18,
                        user: { id: 1, username: 'user1' }
                    }
                },
                template: '#hello',
                components: {
                    'my-world': {//子组件：在一个组件内部定义另一个组件，称为父子组件
                        template: '#world',
                        // props:['message','name']//简单的字符串数组
                        props:{
                            message:String,
                            name:String,
                            age:{
                                type:Number,
                                default:18,
                                validator:function(value){
                                    return value >=0;
                                }
                            },
                            

                        }
                    }
                }
            }
        }
    })
</script>

2.2）父组件访问子组件的数据
a)在子组件中使用vm.$emit(事件名,数据)触发一个自定义事件，事件名自定义
b)父组件在使用子组件的地方监听子组件触发的事件，并在父组件中定义方法，用来获取数据
总结：子组件通过events给父组件发送消息，实际上就是子组件把自己的数据发送到父组件

<div id="app">
    <my-hello></my-hello>
</div>
<template id="hello">
    <div>
        <h3>我是hello父组件</h3>
        <h3>访问自己的数据：{{msg}}，{{name}}，{{age}}，{{user.username}}</h3>
        <h3>访问子组件的数据：{{sex}}，{{height}}</h3>
        <hr>
        <!-- 子组件只能在父组件内部使用 -->
        <my-world :message="msg" :name="name" :age="age" @e-world="getData"></my-world>

    </div>
</template>
<template id="world">   
    <div>
        <h3>我是world子组件</h3>
        <h4>访问父组件中的数据：{{message}}，{{name}},{{age}}</h4>
        <button @click="send">访问自己的数据：{{sex}}，{{height}}</button>
    </div>
</template>

<script type="text/javascript">
    var vm = new Vue({//根组件
        el: "#app",
        components: {
            'my-hello': {//父组件
                methods: {
                    getData(sex, height) {
                        this.sex = sex,
                        this.height = height
                    }
                },
                data() {
                    return {
                        msg: 'test',
                        name: 'tom',
                        age: 18,
                        user: { id: 1, username: 'user1' },
                        sex: '',
                        height: 0
                    }
                },
                template: '#hello',
                components: {
                    'my-world': {//子组件：在一个组件内部定义另一个组件，称为父子组件
                        template: '#world',
                        // props:['message','name']//简单的字符串数组
                        props: {
                            message: String,
                            name: String,
                            age: {
                                type: Number,
                                default: 18,
                                validator: function (value) {
                                    return value >= 0;
                                }
                            },
                        },
                        data() {
                            return {
                                sex: 'male',
                                height: 180.5
                            }
                        },
                        methods: {
                            send() {
                                //console.log(this);//此处的this表示当前子组件实例
                                this.$emit('e-world', this.sex, this.height)//使用$emit()触发一个，发送数据
                            }
                        }
                    }

                }
            }
        }
    })
</script>

单向数据流

props是单向绑定的，当父组件的属性变化时，将传导给子组件，但是不会反过来，而且不允许子组件直接修改父组件中的数据，报错
解决方式：
方式1：如果子组件想把它作为局部数据来使用，可以将数据存入另一个变量中再操作，不影响父组件中的数据

<div id="app">
    <h2>父组件：{{name}}</h2>
    <input type="text" v-model="name">
    <my-hello :name="name"></my-hello>
</div>
<template id="hello">
    <div>
        <h3>子组件：{{username}}</h3>
        <button @click="change">修改数据</button>
    </div>
</template>

<script type="text/javascript">
    var vm = new Vue({//父组件
        el: "#app",
        data:{
            name:'tom'
        },
        components: {
            'my-hello': {//子组件
                template: '#hello',
                props:['name'],
                data(){
                    return {
                        username:this.name//方式1：如果子组件想把它作为局部数据来使用，可以将数据存入另一个变量中再操作，不影响父组件中的数据
                    }
                },
                methods: {
                    change(){
                        this.username = 'alice'
                    }
                },
            }
        }
    })
</script>

方式2：如果子组件想修改数据并且同步更新到父组件，两个方法：
a.使用.sync（1.0版本中支持，2.0版本中不支持，2.3版本又开始支持）
需要显式地触发一个更新事件
b.可以将父组件中的数据包装成对象，然后在子组件中修改对象的属性(因为对象是引用类型，指向同一个内存空间)，推荐

<div id="app">
    <h2>父组件：{{name}},{{user.age}}</h2>
    <input type="text" v-model="name">
    <my-hello :name.sync="name" :user="user"></my-hello>
</div>
<template id="hello">
    <div>
        <h3>子组件：{{name}}</h3>
        <h3>子组件：{{user.age}}</h3>
        <button @click="change">修改数据</button>
    </div>
</template>

<script type="text/javascript">
    var vm = new Vue({//父组件
        el: "#app",
        data: {
            name: 'tom',
            user: {
                name: 'zhangsan',
                age: 24
            }
        },
        components: {
            'my-hello': {//子组件
                template: '#hello',
                props: ['name', 'user'],
                methods: {
                    change() {
                        // this.$emit('update:name','alice')//方式2：a.使用.sync
                        this.user.age = 18
                    }
                },
            }
        }
    })
</script>

非父子组件间的通信

非父子组件间的通信，可以通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件

<div id="app">
    <my-a></my-a>
    <my-b></my-b>
</div>
<template id="a">
    <div>
        <h3>A组件：{{name}}</h3>
        <button @click="send">将数据发送给B组件</button>
    </div>
</template>
<template id="b">
    <div>
        <h3>B组件：{{age}}</h3>
        <h3>{{name}}</h3>
    </div>
</template>

<script type="text/javascript">
    //定义一个空的Vue实例
    var Event = new Vue()
    var A = {
        template: '#a',
        data() {
            return {
                name: 'tom'
            }
        },
        methods: {
            send() {
                Event.$emit('data-a', this.name)
            }
        },
    }
    var B = {
        template: '#b',
        data() {
            return {
                age: 20,
                name: ''
            }
        },
        mounted() {//在模板编译完成后执行
            Event.$on('data-a', name => {
                this.name = name;
            })
        },
    }
    var vm = new Vue({//父组件
        el: "#app",
        components: {
            'my-a': A,
            'my-b': B
        }
    })
</script>

Slot内容分发

本意：位置、槽
作用：用来获取组件中的原内容

<div id="app">
    <my-hello>
        <ul slot="s1">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ol slot="s2">
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ol>
    </my-hello>
</div>
<template id="hello">
    <div>
        <slot name="s2"></slot>
        <h3>welcome to itany</h3>
        <slot name="s1"></slot>
        <!-- <slot>如果没内容，则显示该内容</slot> -->
    </div>
</template>

<script type="text/javascript">
    var vm = new Vue({//父组件
        el: "#app",
        components: {
            'my-hello': {
                template: '#hello'
            }
        }
    })
</script>