zoukankan      html  css  js  c++  java
  • 非父子间组件的传值通信

    非父子间的传值通信我们可以通过一个空的 Vue 实例作为中央事件总线(事件中心),用他来触发事件和监听事件。

    一、在 main.js 中初始化根 Vue 之前,添加一个 data 对象,内写入一个名为 Event 的空 Vue 对象,也就是中央事件总线
    new Vue({
      el: '#app',
      data:{
        Event: new Vue()
      },
      render: h => h(App)
    })
    
    二、在各组件中使用 Vue 的实例属性 $root 来访问我们当前组件树的根 Vue 实例,这样就可以使用

    vm.$root.Event 来访问我们定义的事件发射器 Event
    比如我在 Hello.vue 组件中想发送数据到 Vue.vue 组件中

    <template>
        <div class="hello">
            <h3>我是 {{name}} 组件</h3>
            <button @click="send">发送数据到Vue组件中</button>
        </div>
    </template>
    
    <script>
    export default {
        data(){
            return {
                name: 'Hello'
            }
        },
        methods:{
            send(){
                // 触发组件 Hello 中的事件
                               // $emit(事件名,数据)
                this.$root.Event.$emit('hello',this.name)
            }
        }
    }
    </script>
    

    Vue.vue 组件中进行接收

    <template>
        <div class="Vue">
            <h3>我是 {{name}} 组件</h3>
        </div>
    </template>
    
    <script>
    export default {
        data(){
            return {
                name: ''
            }
        },
        mounted(){
            // 在组件 Vue 创建的钩子中监听事件
                            // $on(事件名,数据)
            this.$root.Event.$on('hello',name => {
                this.name = name
            })
        }
    }
    </script>
    

    这样就可以实现数据的通信了


     
    不足之处还望指教!!!欢迎沟通交流。



  • 相关阅读:
    matlab中padarray函数在numpy、python中的实现
    MAC卸载/删除 Parallels Desktop虚拟机的方法
    CNMeM is disabled
    UbuntuServer14.04+CUDA7.5+CuDNNv3+Caffe+OpenCV3.0+配置
    npy数据的保存与读取
    update_TypeError
    Git操作流程,基本命令演示
    CSS 的优先级机制[总结]
    Git 进阶 —— 远程仓库
    Git实现从本地添加项目到远程仓库
  • 原文地址:https://www.cnblogs.com/changk/p/8783375.html
Copyright © 2011-2022 走看看