<template>
? <div>
? ? 父組件
? ? {{ data }}
? ? <button @click="add()">修改</button>
? ? <hr />
? ? 子組件：<Son />
? </div>
</template>

<script>
import Son from "./components/Son.vue";
import { provide, ref, shallowRef ,readonly,shallowReadonly} from "vue";
export default {
? components: {
? ? Son,
? },
? setup() {
? ? let data = ref("123");
? ? let updata = () => {
? ? ? data += "==";
? ? };
? ? let add = ()=>{
? ? ? data+="=12"
? ? }
? ? provide("updata",updata);
? ? provide("show", data);
? ? return {
? ? ? data,
? ? ? updata,
? ? ? add
? ? };
? },
};
</script>
<style lang="less" scoped></style>

<template>
? <div>{{son}}</div>
? <button @click="updataSon(12)">更改</button>
</template>

<script>
import { ref,inject } from "vue";
export default {
? setup() {
? ? const son = (inject("show"));
? ? const updataSon = inject("updata")
? ? return{
? ? ? ? son,
? ? ? ? updataSon
? ? }
? },
};
</script>
<style lang="less" scoped></style>

<template>
? ? <el-icon :size="size" :color="color" @click="change">
? ? ? ? <component :is="name"></component>
? ? </el-icon>
</template>

<script setup>
import { defineProps, defineEmits, defineExpose} from 'vue'
// 定義傳值類型
const props = defineProps({
? ? name: {
? ? ? ? type: String,
? ? ? ? required: true,
? ? },
? ? size: {
? ? ? ? type: String,
? ? ? ? default: '',
? ? },
? ? color: {
? ? ? ? type: String,
? ? ? ? default: '',
? ? },
})
// 定義事件名
const emit = defineEmits(['change'])?
// 觸發(fā)事件
const change =()=>{
? ? emit('change',{name:21231,data:456})
}
defineExpose({
? ? change,props
})
</script>