vue 组件传值的常用5种方法

前言
组件传值非法常用 这里简单记录下下

一. ref方式

- ref方式
    - 父传子：父获取子组件实例对象
        - 子组件标签  ref="xxx"
        - this.$refs.xxx====子组件的this
    - 子传父：子获取父的实例对象
        - this.$parent===父组件的实例对象
        - 注意点：它是拿到最近的父级

代码演示

父组件

<template>
  <div>
    <h3>父组件</h3>
    <button @click="setChildInfo">向子组件传值</button>
    <hr />
    <h3>子组件</h3>
    <child ref="child"></child>
  </div>
</template>

<script>
//子组件地址（仅供参考），具体以实际项目目录地址为准
import child from "./Child.vue";
export default {
  components: {
    child: child
  },
  data() {
    return {};
  },
  methods: {
    // 向子组件传值
    setChildInfo() {
      this.$refs.child.cInfo = "c2";
    }
  }
};
</script>

<style scoped>
</style>

子组件

<template>
  <div>
    <p>收到父组件数据：{{ cInfo }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cInfo: "c1"
    };
  }
};
</script>

<style scoped>
</style>

提示：这里只是传了属性 也可以是方法

二. props $emit父子传值方式

- 父传子
    - 子组件标签  :子组件属性名=“父组件属性”
    - 子组件内
        - props:['子组件属性名']
    - 特点：单向数据流
- 子传父
    - 子组件标签  @子组件方法名=“父组件方法”
    - 子组件内：
        - this.$emit('子组件方法名'，实参)

代码演示

<template>
  <div>
    父组件：{{ num }}
    <Son
      :value="num"
      @change="changeNum"
    />
    <!--
        通过动态绑定value值，进行传值num
        监听子组件的change方法，
    -->
  </div>
</template>
 
<script>
import Son from './Son'
export default {
  components: {
    Son
  },
  data () {
    return {
      money: 100,
    }
  },
  methods: {
    changeNum (val) {
      this.money = val
    }
  }
 }
</script>
<template>
  <div>
    子组件：{{value}}
    <button @click="change">我要200</button>
  </div>
</template>
 
<script>
export default {
  props: {
    value: {
      type: Number,
      default: 1
    }
  },
  methods: {
    change () {
      //  子组件通过$emit方法，并传入事件名称'change'来触发父组件监听的change事件
      this.$emit('change', 200)
    }
  }
}
</script>

​

三. 父子组件传值 .sync 修饰符传值方式

子组件标签  :xxx="appXxx"  @update:xxx="appXxx=$event"
子组件标签  :xxx.sync="appXxx" 
子组件内
   props:['xxx']
   this.$emit('update:xxx',实参)

代码演示

<template>
  <div>
    父组件：{{ num }}
    <!--
        @change="changeNum"改写为
        需要更新value值  this.num = 传过来的值
        @update:value="(val) => this.money = val"
    -->
    <Son
      :value="num"
      @update:value="(val) => this.num = val"
    />
 
  </div>
</template>
 
<script>
import Son from './Son'
export default {
  components: {
    Son
  },
  data () {
    return {
      num: 100,
    }
  },
}
</script>
<template>
 <div>
    子组件：{{value}}
    <button @click="change">我要200</button>
  </div>
</template>
 
<script>
export default {
  props: {
    value: {
      type: Number,
      default: 1
    }
  },
  methods: {
    change () {
      this.$emit('update:value', 200)
    }
  }
}
</script>

把上述示例中

<Son
  :value="num"
  @update:value="(val) => this.num = val"
/>

修改为

<Son :value.sync="money"/>

四. v-model 父子传值方式

子组件标签  :value="appValue"  @input="appValue=$event"
子组件标签  v-model="appValue"  
子组件内
   props:['value'],
   model:{
     prop:'value',
     event:'change'
   },
   this.$emit('change',实参)
   

代码演示

 <Son
  :value="num"
  /* @change="changeNum" */ 
  @input="changeNum"
/>

<template>
  <div>
    parent组件：{{prize}}
    <Daughter 
      :value="prize" 
      @input="prize => this.prize = prize"
    />
  </div>
</template>
 
<script>
import Daughter from './Daughter'
export default {
  components: { Daughter},
  data () {
    return {
      prize: 10
    }
  }
}
</script>
<template>
  <div>
    女儿：{{value}}
    <button @click="change">v-model修改</button>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: Number,
      default: 1
    }
  },
  methods: {
    change () {
      this.$emit('input', 300)
    }
  }
}
</script>

把上述示例中

<Daughter 
  :value="prize" 
  @input="prize => this.prize = prize"
/>

修改为

<Daughter v-model="prize"/>

五. 兄弟组件传值方式

Vue.prototype.$bus=new Vue()
监听：this.bus.bus.bus.on('事件名',(形参)=>{})
触发：this.bus.bus.bus.emit('事件名'，实参值)
销毁：this.bus.bus.bus.off('事件名')

总结
提示：除此之外还有vuex 跨级组件传值 等