zoukankan      html  css  js  c++  java
  • Vue非父子组件传值方式。

    项目结构:

    1.事件总线方式:

    ①.先建util目录,然后再目录里新建bus.js文件,bus.js文件内容:

    //非父子组件传值之事件总线。
    //先建一个bus.js文件,然后在需要传递信息的地方引入。
    //import bus from './bus.js'
    //类似C#中定义一个类,然后实例化这个类,然后引用。
    import Vue from 'vue'
    
    export default new Vue;

    ②.在需要传递信息的组件中引入bus.js,这里是从APP.vue组件向Child.vue组件传递信息,然后要发送数据到Child.vue组件中。

    传递信息使用 bus.$emit("方法名"),接收信息的组件中使用bus.$on("方法名",callback)监听
    <template>
      <div id="app">
       <button @click="sendmsg">bus走你</button>
       <m-parent></m-parent>
       <router-view></router-view>
        </div>
        <!-- <router-view/> -->
    </template>
    <script>
    //引入组件
    import MParent from './views/Parent'
    
    //从app.vue 往 Child.vue中传递信息。
    import bus from './util/bus';
    export default({
     components: {
       MParent,//注册组件。
     },
     methods: {
       sendmsg() {
         bus.$emit('appmsg','I am from App.vue');
       }
     },
    })
    </script>
    <style>
    
    </style>

    ③.在Child.vue组件中引入bus.js,然后监听bus.$on();

    <template>
        <div>
            <h3>child</h3>
            <h4>{{msg}}</h4>
            <h6>{{childmsg}}</h6>
            <button @click="sendmsg">传给父亲</button>
        </div>
    </template>
    
    <script>
    import bus from '../util/bus';
        export default {
            //使用 props 属性接收父组件传过来的值。
            props: {
                msg: {
                    type: String,
                    default: ''
                },
            },
            methods: {
                sendmsg() {
                    this.$emit('showmsg','from child msg');//触发父组件监听的showmsg(),并且传值。
                }
            },
            data() {
                return {
                    childmsg: ''
                }
            },
            mounted () {
                bus.$on('appmsg',(val)=>{
                    this.childmsg=val;
                });
            },
        }
    </script>
    
    <style  scoped>
    
    </style>
    View Code
  • 相关阅读:
    博客园
    未释放的已删除文件
    ssh连接缓慢
    剑指 Offer 38. 字符串的排列
    剑指 Offer 37. 序列化二叉树
    剑指 Offer 50. 第一个只出现一次的字符
    剑指 Offer 36. 二叉搜索树与双向链表
    剑指 Offer 35. 复杂链表的复制
    剑指 Offer 34. 二叉树中和为某一值的路径
    剑指 Offer 33. 二叉搜索树的后序遍历序列
  • 原文地址:https://www.cnblogs.com/longdb/p/14682498.html
Copyright © 2011-2022 走看看