随记 - vue组件之间通信

#父子组件通信
1.props/emit

// 父组件 Home.vue
<template>
	<div>
		<HelloWorld msg="props传值" @tolp="laikun" />
	</div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue';
export default {
	components: {HelloWorld},
	setup(){
		const laikun = (e) => {
			console.log(e, '<--- e');
		};
		reutrn {laikun}
	}
}
</script>

// 子组件 HelloWorld.vue
<script>
export default {
	name: 'HelloWorld',
	props: {
		msg: String
	},
	setup(props, content){
		onMounted(() => {
			content.emit('tolp', props.msg);
		});
	}
}
</script>

父组件通过props(:msg="props传值")将对应的值传到子组件中，子组件使用props(props: {msg: String})来接收对应的属性值msg,如果使用setup则需要通过setup(props, content)来接收props，因为setup不存在this上下文，如果是data(){}/methods:{}则忽略。同里，子组件通过emit()与父组件通信

2.ref/refs

// 父组件 Home.vue
<template>
	<div>
		<HelloWorld ref="hello" msg="props传值" @tolp="laikun" />
	</div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue';
import { ref } from 'vue';
export default {
	components: {
		HelloWorld
	},
	setup(){
		const hello = ref(null);
		onMounted(() => {
			hello.value.sayWhy();
		});
		return {hello}
	}
}
</script>

// 子组件 HelloWorld.vue
<script>
export default {
	setup(){
		const sayWhy = () => {
			console.log('we only say why?');
		};
		return{sayWhy}
	}
}
</script>

由于setup不存在this，所以this.$refs就不能够使用了，为了解决这个问题，vue使用了ref()来替代this.$refs,素材上的hello.value等同于this.$refs.hello

3.provide/inject

// 父组件 Home.vue
<script>
import { ref, provide } from 'vue';
export default {
	setup(){
		const rA = ref('1');
		const change = () => {
			console.log('<--- success');
		};
		// 变量
		provide('Text1', rA);
		// 事件
		provide('eventBut', change);
		return {rA,change}
	}
}

// 子组件 HelloWorld.vue
<template>
	<div>
		<h1>ParentMsg1:{{ ParentMsg1 }}</h1>
		<button @click="eventBut">provide事件</button>
	</div>
</template>

<script>
import { inject } from 'vue';
export default {
	setup(){
		const ParentMsg1 = inject('Text1');
		const eventBut = inject('eventBut');
		return{ParentMsg1,eventBut}
	}
}
</script>

这种方式是利用了vue中的依赖注入，父组件中使用provide钩子将属性或者事件通过key-value的格式发送出去，子组件通过inject钩子通过key-value的格式接收对应的属性或者事件

#兄弟组件通信
4.$parent / $children(vue3中 $children property 已被移除，且不再支持，vue2可以用)

// 父组件 Home.vue -- vue2
<template>
  <div>
    <h1>{{ msg }}</h1>
    <HelloWorld />
    <button @click="change">点击改变子组件值</button>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue';
export default {
  components: { HelloWorld },
  data() {
    return {
      msg: 'Welcome'
    }
  },
  methods: {
    change() {
      // 获取到子组件
      this.$children[0].message = 'Vue2'
    }
  }
}
</script>

// 子组件 HelloWorld.vue -- vue2
<template>
  <div>
    <h1>{{ message }}</h1>
    <p>获取父组件的值为: {{ pValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Vue'
    }
  },
  computed:{
    pValue(){
      return this.$parent.msg;
    }
  }
}
</script>