Vue脚手架中组件传参（父子组件 祖孙组件 同级兄弟组件）

• 父往子用props
• 子往父用$emit

1. v-model 父子组件之间的双向绑定

//父级将值传给子级
<Later v-model="twocount"></Later>
//子组件接收一个value
props:["value"],
//不要修改props里面的值，在data里定义一个变量，将接收的值付给新变量
data() {
       return {
           showvalue:this.value
       }
   },
   //监听这个变量如果这个变量发生改变需要定义一个input事件，实现双向绑定
   watch: {
       showvalue(val){
           this.$emit("input",val)
       }
   },

2. 祖孙代组件的传参通过这个方法一层套一层有点复杂，在这里使用依赖注入
   Vue文档连接

// 祖代组件
// provide 选项允许我们指定我们想要提供给后代组件的数据/方法
provide: function() {
      return {
          // 通过传递一个对象过去，接收的组件修改这边会响应
          //也可以直接将this传过去，后代组件还能获得祖代组件里的方法
        obj: this.obj
      }
    },
    data() {
    return {
      obj: {
        onecount: 1
      },
    };
  },
// 孙代组件
// 通过inject接收
inject: ['obj'],
 data() {
        return {
        // 将得到的值赋给新变量
            threecount:this.obj.onecount
        }
    },
    watch: {
    // 监听这个变量
    	  threecount(val){
    	// 因为祖代是传递的一个对象过来的所有可以直接改变这个对象
           this.obj.onecount = val
        }
    },
    

3. 同级兄弟组件传参，使用中央事件总线，创造单独的vue实例利用$on监听 $emit触发
   Vue文档

 / /main.js中创建一个单独的Vue实例
 // 向Vue添加一个$bus的Vue实例这样所有的组件都可以通过this.$bus获得Vue实例
 Vue.prototype.$bus = new Vue()

兄弟组件一
methods: {
        add(){
            this.textnum++
            // 这边触发事件将值传过去
            //也可以不传值，在这个组件操控另一个组件进行运算
            this.$bus.$emit("change",this.textnum)
        }
    },

兄弟组件二：
created() {
        // 监听这个事件change 回调函数的e就是那边传入的值
        this.$bus.$on("change",e=>{
            this.num= e
        })
    },