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>
    

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


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



  • 相关阅读:
    JAVA消息对话框
    stringbuffer capacity()的疑问
    JAVA确认对话框
    c/c++实现获取NOD32升级账号密码
    复制构造函数(拷贝构造函数)
    使用VC将sqlite3.def转化为sqlite3.lib
    Windows下安装OpenSSL
    java中io与nio的使用
    使用 XStream 把 Java 对象序列化为 XML
    使用 XStream 把 Java 对象序列化为 XML
  • 原文地址:https://www.cnblogs.com/changk/p/8783375.html
Copyright © 2011-2022 走看看