3.17

131 阅读1分钟

1、利用事件总线的方式实现兄弟组件通信

在构造函数Vue的原型身上添加一个$bus属性 属性的值是Vue的实例化对象

事件总线事件不局限于兄弟组件传值总的特征 、先监听自定义事件 再发送自定义事件,频繁使用 会显得浪费性能

main.js文件

Vue.prototype.$bus=new Vue();

childA

我是childA

methods:{

      /* 利用事件总线的方式实现兄弟传值 */

        send(){

            ()里面代表注册事件,传过去的值

            this.bus.bus.emit('childV','成功实现兄弟传值')

        }

    }

childB

ChildB:{{childVStr}}

    data(){

        return {

            childVStr:'我是弟弟'

        }

    },

    created(){

兄弟组件通信 需要使用$on方法 值用回调函数接收

        this.bus.bus.on('childV',v=>{

               console.log('v是childA传过来的')

               this.childVStr=v;

           })

    }

2、ref 的用法

/* $refs方法操作于原生DOM可以获取原生DOM元素 */

/* 使用this.$children也可以获取子组件的属性和方法 */

{{ msg }}

<button @click="fn">获取原生dom,修改dom内容,获取最新dom内容

data(){

return{{

msg:'我爱taotao'

}

}

/this.$nextTick() 及时更新数据,而直接log出来的是原来的值/

fn() {

      this.msg = "成功获取原生DOM内容 我爱张sir";

      this.$nextTick(() => {

        console.log(this.$refs.haha.innerHTML);

      });

    }

3、利用.sync语法糖实现父子通信(父传子,子改父)

父组件

 msg:  "我是父组件的人"

子组件

{{cmsg}}

使用props接受父组件cmsg.sync传过来的值

 props:['cmsg']

 methods:{

        改父组件的值,可以使用$emit('update:(sync过来的值)', { })

        change(){

            this.$emit('update:cmsg','.sync的方法子改父')

        }

    }