vue组件传值的几种方式

一、父子间传值

1.props / $emit

⼦组件中通过定义props接收⽗组件中通过v-bind绑定的数据
⽗组件中通过监听⼦组件中$emit的⾃定义事件接收数据

2.$parent / children

⼦组件中通过this.$parent这个对象获取⽗组件中的数据⽗组件中通过this.$children这个数组获取⼦组件中的数据

3.$ref

⽗组件中定义⼦组件中的ref属性后，通过this.$refs.定义的属性名获取⼦组件数据
第3集 vue中组件间传值常⽤的⼏种⽅式(下)

实例
Parents.vue

<template>
  <div class="parent">
    <div>this is a parent page</div>
    <h3>{{msg}}</h3>
    <Child v-bind:msg="'from parent'" @showMsg="showMsg1" ref="child"></Child>
    <!-- @showMsg="showMsg1"监听事件 -->
  </div>
</template>

<script>
import Child from '@/views/Child.vue'


export default {
  data(){
    return{
      msg:''
    }
  
  },
  components: {
    Child
  },
  methods:{
    showMsg1(val){
      this.msg=val
    }
  },
  mounted () {
    console.log(this.$children[0].childMsg);
    console.log('ref',this.$refs.child)
  },
}
</script>

Child.vue

<template>
  <div class="child">
    <h1>This is a child page</h1>
    <h2>{{msg}}</h2>
    <button @click="passtoParent">子向父传值</button>
  </div>
</template>

<script>
  export default {
    //父向子传值
    props:{
      msg:{
        type:String,
        default:''
      }
    },
    data() {
      return {
        childMsg: 'childMsg'
      }
    },
    methods:{
      passtoParent(){
        this.$emit('showMsg','this is from child')
      }
    }
  }
</script>

<style lang="css" scoped>
  .child{
     background-color:red;
  }
      
</style>

二、⾮⽗⼦间传值

1.事件总线

// 原理上就是建⽴⼀个公共的js⽂件，专⻔⽤来传递消息
// bus.js
import Vue from 'vue'
export default new Vue;
// 在需要传递消息的地⽅引⼊
import bus from './bus.js'
// 传递消息
bus.$emit('msg', val)
// 接受消息
bus.$emit('msg', val => {
 console.log(val)
})

App.vue

<template>
  <div id="app">
    <button @click="passMsg">非父子传值App->Child</button>
    
    <router-view/>
  </div>
</template>
<script>
import bus from './util/bus'
  export default {
    methods: {
      passMsg() {
        bus.$emit('msg','this is from App')      
      }
    },  
  }
</script>

Child.vue

<template>
  <div class="child">
    <h2>This is a child page</h2>
    <h3>{{msg}}</h3>
    <h4>{{childMsg}}</h4>
    <button @click="passtoParent">子向父传值</button>
  </div>
</template>
<script>
import bus from '../util/bus'
  export default {
    //父向子传值
    props:{
      msg:{
        type:String,
        default:''
      }
    },
    data() {
      return {
        childMsg: 'childMsg'
      }
    },
    methods:{
      passtoParent(){
        this.$emit('showMsg','this is from child')
      }
    },
    mounted () {
      // bus.$on监听
      bus.$on('msg',(val)=>{
        this.childMsg=val
      });
    },
  }
</script>
<style lang="css" scoped>
  .child{
     background-color:red;
  }     
</style>

2.$attrs / $listeners

// 解决多级组件间传值的问题
// $attr 将⽗组件中不包含props的属性传⼊⼦组件，通常配合 interitAttrs 选项
⼀起使⽤。
// 如果不想在dom上出现属性，可设置interitAttrs: false
// $listeners监听⼦组件中数据变化，传递给⽗组件

实例
App.vue

<template>
  <div id="app">
    <button @click="passMsg">非父子传值App->Child</button>
    <Parent :msg='a' :msg2='b' :msg3='c'></Parent>//改动
    <router-view/>
  </div>
</template>


<script>
import bus from './util/bus'
import Parent from './views/Parent'
  export default {
  //改动
    data() {
      return {
        a: 'msga',
        b: 'msgb',
        c: 'msgc',

      }
    },
    components:{
      Parent
    },
    methods: {
      passMsg() {
        bus.$emit('msg','this is from App')
        
      }
    },
    
  }
</script>

Child.vue

<template>
  <div class="child">
    <h2>This is a child page</h2>
    <h3>{{msg}}</h3>
    <h4>{{childMsg}}</h4>
    <button @click="passtoParent">子向父传值</button>
  </div>
</template>

<script>
import bus from '../util/bus'
  export default {
    //父向子传值
    props:{
      msg:{
        type:String,
        default:''
      }
    },
    data() {
      return {
        childMsg: 'childMsg'
      }
    },
    methods:{
      passtoParent(){
        this.$emit('showMsg','this is from child')
      }
    },
    mounted () {
      //改动
      console.log('attrs',this.$attrs),
      // bus.$on监听
      bus.$on('msg',(val)=>{
        this.childMsg=val
      });
    },
  }
</script>

<style lang="css" scoped>
  .child{
     background-color:red;
  }
      
</style>

Parent.vue

<template>
  <div class="parent">
    <div>this is a parent page</div>
    <h1>{{msg}}</h1>
    <!-- 改动-->
    <Child v-bind:msg="'from parent'" @showMsg="showMsg1" ref="child" v-bind="$attrs"></Child>
    <!-- @showMsg="showMsg1"监听事件 -->
  </div>
</template>

<script>
import Child from './Child'


export default {
  data(){
    return{
      msg:''
    }
  
  },
  components: {
    Child
  },
  methods:{
    showMsg1(val){
      this.msg=val
    }
  },
  mounted () {
    console.log(this.$children[0].childMsg);
    console.log('ref',this.$refs.child)
  },
}
</script>

3.vuex