Vue3组件通信

<template>
  <div class="father">
    <h3>父组件，</h3>
		<h4>公司名称：{{ company }}</h4>
		<h4>子组件传回的游戏：{{ game }}</h4>
		<Child :company="company" :getGame="getGame"/>
  </div>
</template>

<script setup lang="ts" name="Father">
	import Child from './Child.vue'
	import { ref } from "vue";
	const company = ref('SE')
	const game = ref()
	function getGame(value:string){
		game.value = value
	}
</script>

<template>
  <div class="child">
    <h3>子组件</h3>
		<h4>我的游戏：{{ game }}</h4>
		<h4>游戏所属公司：{{ company }}</h4>
		<button @click="getGame(game)">汇报</button>
  </div>
</template>

<script setup lang="ts" name="Child">
	import { ref } from "vue";
	const game = ref('FF14')	
	defineProps(['company','getGame'])
</script>

<template>
	<div class="father">
		<h3>子组件传回的数据：{{ childData }}</h3>
		<!-- 用@自定义事件接收子组件传来的方法 -->
		<Child @send-Data="showData" />
	</div>
</template>

<script setup lang="ts" name="Father">
import Child from './components/Child.vue'
import { ref } from "vue";
const childData = ref()
function showData(value: string) {
	childData.value = value
}
</script>

<template>
	<div class="child">
		<button @click="emit('send-data', childData)">玩具给父亲</button>
	</div>
</template>

<script setup lang="ts" name="Child">
import { ref } from 'vue'
let childData = ref('大头儿子')
// 使用defineEmits，defineEmits内包含一个方法的数组，用法与vue2的this.$emit一致，方法命名使用-连接
const emit = defineEmits(['send-data']) 
</script>

<Child :a="a" :b="b" :c="c" :d="d" v-bind="{x:100,y:200}" :updateA="updateA"/>

<!--子组件将父组件收到的所有值都传给自己的子组件。如果子组件定义了props接受了一部分数据，则$attrs中不包含这些-->
<GrandChild v-bind="$attrs"/>

<template>
	<div class="grand-child">
		<h3>孙组件</h3>
		<h4>a：{{ a }}</h4>
		<h4>b：{{ b }}</h4>
		<h4>c：{{ c }}</h4>
		<h4>d：{{ d }}</h4>
		<h4>x：{{ x }}</h4>
		<h4>y：{{ y }}</h4>
		<!--下面的button表示孙组件可以通过方法将数据传回祖组件-->
		<button @click="updateA(1)">点我更新A</button>
	</div>
</template>

<script setup lang="ts" name="GrandChild">
	defineProps(['a','b','c','d','x','y','updateA'])
</script>

<template>
	<div class="father">
		<h3>子组件传回的数据：{{ childData }}</h3>
		<button @click=getAllChildren($refs)>获取子组件</button>
		<Child ref="child" />
	</div>
</template>

<script setup lang="ts" name="Father">
import Child from './components/Child.vue'
import { ref } from "vue";
let childData=ref('完全由父组件确定')
function getAllChildren(refs: {[key:string]:any}) {
	refs.child.bookNum+=3
}
defineExpose({childData})
</script>

<template>
	<div class="child">
		<h3>展示出来的数字：{{ bookNum }}</h3>
		<button @click="updateFather($parent)">更改父组件</button>
	</div>
</template>

<script setup lang="ts" name="Child">
import { ref } from 'vue'
let bookNum = ref(8)
function updateFather(parent:any){
	parent.house='子组件传回的数据'
}
defineExpose({bookNum})
</script>

<template>
	<div class="father">
		<h3>父组件</h3>
		<h4>父组件已有内容1：{{ money }}</h4>
		<h4>父组件已有内容2：书名：{{ book.name }}，作者：{{ book.author }}</h4>
		<button @click="money += 1">资产+1</button>
		<button @click="book.author += 1">作者姓名+~</button>
		<Child/>
	</div>
</template>

<script setup lang="ts" name="Father">
	import Child from './Child.vue'
	import { ref,reactive,provide } from "vue";
	// 数据
	let money = ref(100)
	let book = reactive({
		name:'彷徨',
		author:'鲁迅'
	})
	// 用于更新money的方法
	function updateMoney(value:number){
		money.value += value
	}
	// 提供数据，该方法提供的数据，所有后代都可以收到，不局限于祖孙组件
	provide('moneyContext',{money,updateMoney})
	provide('book',book)
</script>

<template>
	<div class="grand-child">
		<h3>我是后代组件</h3>
		<h4>继承到的资产：{{ money }}</h4>
		<h4>继承到的书：书名：{{ book.name }}，作者：{{ book.author }}</h4>
		<button @click="updateMoney(6)">点我</button>
	</div>
</template>
<script setup lang="ts" name="GrandChild">
	import { inject } from 'vue';
	// 注入数据
	let {money,updateMoney} = inject('moneyContext',{money:0,updateMoney:(x:number)=>{}})
	let book = inject('book')
</script>

<template>
	<div class="father">
		<Child title="古代">
			<ul>
				<li v-for="item in list" :key="item.id">{{ item.name }}</li>
			</ul>
		</Child>
		<Child title="近现代">
			<span>{{ name1 }}</span>
		</Child>
		<Child title="国外">
			<span>{{ name2 }}</span>
		</Child>
	</div>
</template>

<script setup lang="ts" name="Father">
import Child from './components/Child.vue'
import { ref,reactive } from "vue";
const list=reactive([
	{id:1,name:'李白'},
	{id:1,name:'白居易'},
	{id:1,name:'杜甫'},
	{id:1,name:'柳宗元'},
])
const name1=ref('鲁迅')
const name2=ref('陀思妥耶夫斯基')
</script>

<template>
	<div class="child">
		<h2>{{title}}</h2>
		<slot></slot>
	</div>
</template>

<script setup lang="ts" name="Child">
defineProps(['title'])
</script>

<template>
	<div class="father">
		<Child title="喜欢的作者">
			<template v-slot:s1>
				<ul>
					<li v-for="item in list" :key="item.id">{{ item.name }}</li>
				</ul>
			</template>
			<template v-slot:s2>
				<p>{{ name1 }}</p>
			</template>
			<template #s3>
				<p>{{ name2 }}</p>
			</template>
		</Child>
	</div>
</template>

<template>
	<div class="child">
		<h2>{{title}}</h2>
		<slot name="s1"></slot>
		<slot name="s2"></slot>
		<slot name="s3"></slot>
	</div>
</template>

<template>
	<div class="father">
		<h2>喜欢的作者</h2>
		<Child>
			<template v-slot:author="params">
				<ul>
					<li v-for="item in params.list" :key="item.id">{{ item.name }}</li>
				</ul>
			</template>
		</Child>
		<Child>
			<template #author="params">
				<p>{{ params.name1 }}</p>
			</template>
		</Child>
		<Child>
			<template #author="params">
				<p>{{ params.name2 }}</p>
			</template>
		</Child>
	</div>
</template>

<script setup lang="ts" name="Father">
import Child from './components/Child.vue'
</script>

<template>
	<div class="child">
		<slot name="author" :list="list" :name1="name1" :name2="name2"></slot>
	</div>
</template>

<script setup lang="ts" name="Child">
import {ref,reactive} from 'vue'
const list = reactive([
	{ id: 1, name: '李白' },
	{ id: 1, name: '白居易' },
	{ id: 1, name: '杜甫' },
	{ id: 1, name: '柳宗元' },
])
const name1 = ref('鲁迅')
const name2 = ref('陀思妥耶夫斯基')
</script>