vue 组件间双向通信

vue 组件间通信

组件上的通信 $emit

**需求:**父级vue实例的data中的数据通过在组件上 以(:value=‘cont’)属性传递数据给子组件的形式， 使得数据在组件内部处理然后渲染在组件上
完成: 父级 —>向组件传递数据 组件对数据进行修改通过触发 $emit()提交事件 组件把处理过的数据又当作参数传给父级methods里的handleClick函数 去改变data中的数据 ----》由于vue是数据驱动视图 组件再通过属性传递数据的方式去渲染视图

  <div id="app">
        <my-component :value='cont' @input="handleClick"> </my-component>
    </div>
    <script>
        //  定义全局自定义组件
        Vue.component('myComponent', {
             //组件通过属性绑定的方式传来的数据
            props: ['value'],
            data () {
                return {
                    value1: this.value
                }
            },
            mounted () {
                var self = this;
                setInterval( function () {
                    console.log(this, self)
                    var val = self.value1++;
                    // $emit( 'input' ,val)   触发组件@绑定的input事件名所绑定的函数
                    handleClick函数并把val 当作参数传给handleClick
                    self.$emit('input', val);
                }, 1000)
            },
            // 组件的模板
            template: `<div>{{value}}</div>`
        })
    
    var vm = new Vue({
        el: '#app',
        data: {
            cont : 2,
        },
        methods: {
            handleClick (val) {
                this.cont = val;
                console.log(this.cont)
            }
        }
    })

两个组件间的通信

你可能会感到好奇，为什么要用Vue.prototype.bus = new Vue()
因为我们是在两个相互独立的组件上进行数据的通信，这里我们用到了 this.bus.$on(’ click’, contend1 => {}) 因为我们在Vue的原型上bus 的Vue实例， 所以我们可以通过this.bus 对Vue实例进行访问：
$on(‘click(可以自定义)’， （）=> { 执行回调函数}) 我们可以通过
$emit(‘click’， contend1) 来提交on绑定的回调函数执行 contend1是传给on绑定click事件函调函数的参数；

思路:

// 在Vue实例原型上添加了一个 名为bus的Vue实例
 Vue.prototype.bus = new Vue()
 var vm =  new Vue({
     el:'#app',
     components: {
         // 为了避免代码的可读性好我把组件写出全局组件
     }
 })

组件部分

Vue.component('myContend', {
 myContend: {
                data() {
                    return {
                        contend: ''
                    }
                },
                created () {
                    // 组件之间的通信
                    // 页面一创建完成就绑定在bus上的click事件 执行回调函数 参数是由this.bus.$emit触发的click事件传来的
                    this.bus.$on('click', contend1 => {
                    // contend 是由$emit('click', this.value) 参数一：自定义事件名 参数二: 传递的参数
                   // 通过 this.bus.$on('click', (content) => {}) //当通过this.bus.$on('click', () => {})来绑定的时候就找到对应的 this.bus.$emit('click', value)   实现组件间的相互通信 
                        this.contend = contend1
                    })
                },
                template: `<div> {{contend}} </div>`
})

Vue.component('myInput',{

                data () {
                    return {
                        initValue: ''
                    }
                },
                methods: {
                    handleClick () {
                        // bus是挂到在Vue原型上 this.bus 就可以拿到vue实例，通过$emit来主动触发一个click事件 
                        // this.initValue 传递给通过 this.bus.$on('click', (content)=> {})绑定的click函数 当作其回调函数的参数
                        this.bus.$emit('click', this.initValue)
                        console.log('何冲')
                    }
                },
                template: `<div>
                <input type="text" v-model.lazy="initValue"> </input>
                    <button @click="handleClick">提交</button>
                        </div> `

})