vue3父子、兄弟组件传值

在vue项目中，父子、兄弟组件传值较为普遍，现将其记录下来，如果还有其他方法，敬请指教。

一、父组件传值子组件

父组件传值子组件需要使用props，详细使用可见官网。

1. 父组件代码

   <template>
   	
   	<Son :value-a="imgUrl" :value-b="alt"/>
   template>
   

   <script>
   import Son from '@components/son.vue'
   
   export default {
       name: 'father',
       components: {
   	    Son
   	}
   }
   </script>
   

2. 子组件代码

   <template>
   	<div class="img">
   	    <img :src="valueA" :alt="valueB">
   	div>
   template>
   

   <script>
   export default {
       name: 'son',
       // 子组件内部通过props接受传递过来的值
   	props: ['valueA','valueB']
   }
   </script>
   

二、子组件传值父组件

子组件传值父组件需要使用setup()，详细使用可见官网。

1. 子组件代码

   <script>
   export default {
       name: 'son',
       data() {
   	    return {
   	        contentValue: this.value
   	    }
   	},
   	watch: {
   	    // contentValue随时监控data中的contentValue的值
   	    contentValue (newValue) {
   	        this.sayToFather(newValue)
   	    },
   	},
   	setup(props, context) {
   	    // 如果data中的contentValue有变化，watch会调用setup中的sayToFather，并赋值
   	    const sayToFather = (e) => {
   	        context.emit("listen", e)
   	    }
   	    return {
   	        sayToFather,
   	    }
   	}
   }
   </script>
   

2. 父组件代码

   <template>
   	
   	<Son @listen="name"/>
   template>
   

   <script>
   // 引入子组件
   import Son from '@components/son.vue'
   
   export default {
       name: 'father',
       components: {
   	    Son
   	},
   	setup() {
   	  // ref的作用是实现响应式， 如果没有ref则不能实现响应式（引用数据类型用reactive）
   	  let nameValue = ref('')
   	  // 上面的listen="name"对应这里
   	  let name = (val) => {
   	      nameValue.value = val // 使用ref包裹的数据，需要通过.value的形式访问他的值
   	  }
   	  // 值需要return返回才可以使用
   	  return {
   	      nameValue,
   	      name,
   	  }
   	},
   	watch:{
   	  // 在watch中监控值，若有变化，可赋值
   	  nameValue(val){
   	      console.log('nameValue: ' + val)
   	  }
   	}
   }
   </script>
   

三、兄弟组件传值

在vue3.0之前，兄弟组件传值有一种办法：使用事件总线，但是在vue3.0之后，事件总线被官方去除了，大家可以去官网看一下具体说明。下面我给大家展示使用vuex完成兄弟组件传值，分为全局传值和按需传值。

1）全局传值

1. 首先在src文件夹下新建一个文件夹store，在store下新建一个js文件index.js，这里是存储vuex数据的地方，然后写入以下代码（大家在创建项目的时候，可以勾选上vuex，vue-cli会自动创建）。

   import { createStore } from 'vuex'
   
   export default createStore({
     // 存储数据
     state: {
       value: ''
     },
     // mutations用于变更store中的数据
     mutations: {
       add(state,step){
         state.value = step
       },
     }
   })
   
   

2. 组件一（发送数据的组件）

   <template>
       <div class="one">
           <input type="text" placeholder="请输入发送值..." v-model="value">
           <button @click="send()">buttonbutton>
       div>
   template>
   

   <script>
   export default {
       name: 'one',
       data() {
           return {
               value: ''
           }
       },
       methods: {
           send(){
           	// 将value值发送到vuex
               this.$store.commit('add',this.value);
           }
       },
   }
   </script>
   

3. 组件二（接收数据的组件）

   <template>
       <div class="two">
       	
           <h3>接收值：{{ $store.state.value }}h3>
       div>
   template>
   

2）按需传值

1. 组件一

   <template>
       <div class="one">
           <input type="text" placeholder="请输入发送值..." v-model="value">
           <button @click="send()">buttonbutton>
       div>
   template>
   

   <script>
   import { mapMutations } from 'vuex'
   
   export default {
       name: 'one',
       data() {
           return {
               value: ''
           }
       },
       methods: {
           // 通过导入的mapMutations函数，将mutations函数，映射为methods方法
           ...mapMutations(['add']),
           send(){
               this.add(this.value)
           }
       },
   }
   </script>
   

2. 组件二

   <template>
       <div class="two">
           <h3>接受值：{{ value }}h3>
       div>
   template>
   

   <script>
   import { mapState } from 'vuex'
   
   export default {
       name: 'two',
       computed:{
           ...mapState(['value']) 
       }
   }
   </script>
   

3） 总结

上面总结了2种访问、2种传输数据的方式，可以自由进行组合，完成兄弟组件的数据传值，这是vuex中较为简单的使用，还有actions、modules等，如果大家感兴趣，可以去看官网。

四、代码验证环境

• vue3.0