Vue中常见的几种传参方式小结

// 父传子
// 父组件
<template>
    <div>
        父组件
        <br/>
        <child  :name="name"  @getChild="getChild"/>
    </div>
</template>
<script>
  export default {
     data(){
       return {
         name:'father'
       }
     },
     methods:{
       getChild(val){
         console.log(val)  // 123
       }
     }
  }
</script>
// 子组件
<template>
    <div>
        子组件
        <br/>
        {{name}}
        <button @click="toParent">传到父组件</button>
    </div>
</template>
<script>
  export default {
     props:{
       name:{ type: String, default:''}
     },
     data(){
       return {
       }
     },
     methods:{
       toParent(){
         this.$emit('getChild',123)
       }
     }
  }
</script>

// 父组件
<template>
    <div>
        父组件
        <br/>
        <child  :name.sync="name" />
    </div>
</template>
<script>
  export default {
     data(){
       return {
         name:'father'
       }
     }
  }
</script>
// 子组件
<template>
    <div>
        子组件
        <br/>
        {{name}}
        <button @click="toParent">传到父组件</button>
    </div>
</template>
<script>
  export default {
     props:{
       name:{ type: String, default:''}
     },
     data(){
       return {
       }
     },
     methods:{
       toParent(){
         this.$emit('update:name',123)
       }
     }
  }
</script>

<child ref="child"></child>
// 父组件可以使用$refs.child.xxx直接调用子组件的属性和方法

// 1.首先在app.vue种定义一个中转站，再挂载到全局对象上面。
// App.vue
Vue.prototype.$eventBus = new Vue()
// 2.在需要传递的页面使用$emit(eventName,params)发射参数
this.$eventBus.$emit(eventName,params)
// 3.在需要接收参数的页面使用$on(eventName,(params) => {}) 接收参数
this.$eventBus.$on(eventName,(params) => {})

// 在上级组件中使用provide修饰的数据，在下级组件中可以使用inject接收，类似于props
 // 上级组件
 <script>
   export default {
     data(){
      return {
        age: 12
      }
     },
     provide(){
       return {
         name: 111,
         age: this.age
       }
     }
   }
   // 下级组件
    <script>
   export default {
     data(){
      return {
      }
     },
     inject:['name'，'age'] // 使用时当data数据使用就行
   }
 </script>