vue组件通信

1、父子组件通信

<template id="father">
        <div>
            father
            <Son :qian = "money"></Son>   //1、父组件将自己的数据通过 v-bind 绑定在 子组件身上
        </div>
    </template>

    <template id="son">
        <div>
            son 
            <p> 老爸给了我 {{ money }} 生活费 </p>
        </div>
    </template>

</body>
<script src="../../lib/vue.js"></script>
<script>

    Vue.component('Father',{
        template: '#father',
        data () {
            return {
                money: 2000
            }
        }
    })
    Vue.component('Son',{
        template: '#son',
        props: ['qian']  //2、子组件通过 props属性接收，括号内指的是自定义属性
    })
    new Vue({
        el: '#app'
    })

2、子父组件通信

<div id="app">
        <Father></Father>
    </div>
    <template id="father">
        <div>
            <h3> 这里是父组件 </h3>
            <p> 我现在有： {{ xiaojinku }} </p>
            <!-- 这个的@后的事件名称可以任意  @后的就是自定义事件， =后的就是事件处理程序 -->
            <Son @get = "get"></Son>  /* 1、在父组件模板中找到子组件，在子组件的身上绑定自定义事件 */
        </div>
    </template>

    <template id="son">
        <div>
            <h4> 这里是Son 组件</h4>
            <button @click = "give"> 给红包 </button>
        </div>
    </template>
</body>
<script src="../../lib/vue.js"></script>
<script>

    // 子父组件通信是通过自定义事件实现的  
	//在父组件模板中找到子组件，在子组件的身上绑定自定义事件，事件处理程序要在父组件里定义，在子组件里通过this.$emit触发自定义事件
    Vue.component('Father',{
        data () {
            return {
                xiaojinku: 0
            }
        },
        template: '#father',
        methods: {
            get ( val ) {   /* 2、事件处理程序要在父组件里定义 */
                this.xiaojinku = val
            }
        }
    })

    Vue.component('Son',{
        template: '#son',
        data () {
            return {
                hongbao: 1000
            }
        },
        methods: {
            give () {
                // this.$emit('get',参数)
                this.$emit('get',this.hongbao)  /* 3、在子组件里通过this.$emit触发自定义事件 */
            }
        }
    })

    var vm = new Vue({
        el: '#app'
    })

3、非父子组件通信-ref

 <div id="app">
       <Father></Father>
    </div>
    <template id="father">
        <div>
        	/* 1、先在父组件中将子组件绑定ref属性*/
            <Son ref='son'></son> /* ref的属性值随意，但是为了更加语义，我们写成了组件名称 */
            <hr>
            <Daughter :kick='kick'></Daughter> /* 3、将父组件的事件处理传给daughter*/
        </div>
    </template>

    <template id="son">
        <div>
            <p v-if='flag'>哭哭哭哭哭哭哭哭哭哭哭</p>
        </div>
    </template>

    <template id="daughter">
        <div>
            <button @click='kick'>打</button> /* 5、直接使用事件 */
        </div>
    </template>
</body>
<script src="../lib/vue.js"></script>
<script>

// 组件的数据是由独立作用于的，组件自己的数据自己更改
    Vue.component("Father",{
        template:'#father',
        methods:{
            kick(){
                this.$refs.son.change()   /*2、 由于上面子组件绑定了ref，所以这里可以获得子组件 */
            }
        }
    })
    Vue.component("Son",{
        template:'#son',
        data(){
            return{
                flag:false
            }
        },
        methods:{
            change(){
                this.flag=true
            }
        }
    })
    Vue.component("Daughter",{
        template:'#daughter',
        props:['kick']  /*4、daughter接受父组件传的事件*/
    })
    new Vue({
        el:'#app'
    })

4、非父子组件通信-bus

<div id="app">
        <my-title></my-title>
        <my-content></my-content>
    </div>
    <template id="title">
        <div>
            <input type="text" v-model = "val" @keyup.enter = "addTodos">
        </div>
    </template>

    <template id="content">
        <div>
            <ul>
                <li v-for = "todo in todos" :key = "todo.id">
                    {{ todo.task }}
                </li>
            </ul>
        </div>
    </template>
</body>
<script src="../../lib/vue.js"></script>
<script>
    // bus事件总线思维： 将new Vue() 的实例作为全局变量，用来联通非父子组件
    var bus = new Vue()       /* 1、创建bus */

    Vue.component('MyTitle',{ //组件名称不要写成html原生标签名称
        template: '#title',
        data () {
            return {
                val: ''
            }
        },
        methods: {
            addTodos () {
                bus.$emit('add', this.val )       /*3、 传递数据 */
            }
        }
    })

    Vue.component('MyContent',{
        template: '#content',
        data () {
            return {
                todos: [
                    {
                        id: 1,
                        task: '任务一'
                    },
                    {
                        id: 2,
                        task: '任务二'
                    }
                ]
            }
        },
        mounted () { //表示组件挂载结束，视图中已经能看到界面了
            // 发布一个自定义事件
            var _this = this 
            bus.$on('add',function ( val ) {        /* 2、通过bus来监听事件，接收参数 */
                _this.todos.push({               
                    id: _this.todos.length + 1,
                    task: val 
                })
            })
        }
    })

        
    new Vue({
        el: '#app'
    })