vue的父子组件传值，子组件往父组件传值，非父子组件传值

父子组件传值

1.进行数据的传输，首先要有数据，也就是要在父组件上定义数据
2.使用props建立数据通信的渠道 通过自定义属性进行传值
3.在子组件中接收父组件通过props传递过来的数据

传递注意事项：

传值分为动态传值和静态传值

  <div class="home">  
    <Model :data-one="One"></Model>  //动态通过v-bind进行传递 传递为对应的dataOne数据
  </div>

   <div class="home">
        <Model data-one="One"></Model>   //静态 传递为静态字符串“One”
  </div>

Props接收时须注意驼峰命名规范需要转换例如:props:["dataOne"],

子组件往父组件传值

Vue的解决方案 通过自定义事件
$on/v-on 监听事件
$emit 触发事件
通过v-on 监听自定义事件 调用对应的事件处理函数接收触发时传递过来的数据

    <div id="app">
    
    <button @click="list++">点击自增</button>
    <h1>{{list}}</h1>
    <Model :data-list="list" v-on:test="changeCountFun"></Model>
    
    </div>
    
    methods:{
        changeCountFun(val){
           console.log("我是父元素接收的数据",val)
           this.list=val
        }
    }
    

子组件添加点击事件 通过$emit触发自定义事件

   <div>
      <button @click="countFun">点击递减</button>
      <p>这是parent组件{{count}}</p>
   </div>
   
   methods:{
      countFun(){
      this.count--
      this.$emit("test",this.count)
      }
   }
   

非父组件传值

第一步: 创建公共的bus实例 let bus=new Vue()

   let bus=new Vue()

第二步: 传递数据的一方 通过bus.$emit(“事件名称”,需要传递的数据)

   bus.$emit("test",this.count)

Let that=this; bus.$on(“事件名称”,function(val//emit传递过来的数据){ 需要注意this指向 })

     let that=this
     bus.$on("test",function(val){
         console.log(that.num)
         this.num=val
     })