事件总线的方式兄弟传值

/* 事件总线的方式 */

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

/* 事件总线事件不局限于兄弟组件传值

   总的特征 先监听自定义事件 再发送自定义事件

   频繁使用 会显得浪费性能 */

main.js文件

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

childA

<h1 @click="send">我是childA</h1>

methods:{

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

        send(){

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

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

        }

    }

childB

<h2>ChildB:{{childVStr}}</h2>

    data:function(){

        return {

            childVStr:'我是弟弟'

        }

    },

    created(){

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

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

               this.childVStr=v;

           })

    }

利用ref 获取原生dom 

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

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

<h2 ref="haha">{{ msg }}</h2>

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

fn() {

      this.msg = "成功获取原生DOM内容";

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

      this.$nextTick(() => {

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

      });

    }

父子通信(父传子，子改父)

父组件

<ChildB :iu.sync="iu" />

  iu: { name: "我是父组件的人", },

子组件

<h2 @click="change">{{iu}}</h2>

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

 props:{

接受值为object属性， required:true 表示必传属性，如果不传会报错

        iu:{

                type:Object,

                required:true

            }

    },

 methods:{

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

        change(){

            this.$emit('update:cc',{name:'巩宇来了'})

        }

    }