本文基于<script setup>方式

defineProps和defineEmits實(shí)現(xiàn)父子組件傳值

子組件

<template>
    <div>
        <!-- 方式一 直接調(diào)用$emit-->
        <el-button @click="$emit('sonClick', '子組件數(shù)據(jù)')">子按鈕{{msg}}</el-button>
        <!-- 方式二 -->
        <el-button @click="handleGetMsg">子按鈕{{msg}}</el-button>
    </div>
</template>
<script setup>
    import { ref } from 'vue'
    // defineProps聲明props，返回一個(gè)對(duì)象，其中包含了傳遞給子組件的所有 props
    defineProps({
        msg: {
            type: String,
            default: ''
        }
    })
    // setup中不能使用$emit
    // 通過 defineEmits 宏來聲明需要拋出的事件，返回一個(gè)等同于$emit的函數(shù)
    const emit = defineEmits(['sonClick'])
    function handleGetMsg() {
        emit("sonClick", "子組件向父組件傳送的信息");
    }
</script>

父組件

<template>
    <div>
        <div>son:{{ myname }}</div>
        <son :msg="msg" @sonClick="sonClick"></son>
    </div>
</template>
<script setup>
    import { ref } from 'vue'
    import son from '@/components/son.vue' // 通過 <script setup>導(dǎo)入的組件都在模板中直接可用
    const msg = ref('父組件信息')
    const myname = ref('')
    function sonClick(val) {
        myname.value = val
    }
</script>

ref操作符實(shí)現(xiàn)父子組件傳值

子組件

<template>
    <div>
        <el-button >子按鈕</el-button>
    </div>
</template>
<script setup>
    import { ref } from 'vue'
    const a = ref('a')
    function sonEvent() {
        console.log("sonEvent")
    }
    // setup里面是默認(rèn)私有的，父組件無法訪問，需要通過defineExpose暴露出去，父組件才能訪問
    defineExpose({
        sonEvent,
        a
    })
</script>

父組件

<template>
    <div>
        <son ref="myson"></son>
    </div>
</template>
<script setup>
    import { ref, onMounted } from 'vue'
    import son from '@/components/son.vue' // 不用注冊(cè)
    // ref操作dom, myson必須和模板里ref的值一致
    const myson = ref(null)
    onMounted(() => {
        myson.value.sonEvent()
        console.log('a', myson.value.a)
    })
</script>

provide和inject依賴注入實(shí)現(xiàn)父子組件傳值

父組件

<script setup>
import { ref, provide } from 'vue'
const count = ref(0)
function add() {
    count.value++
}
provide('obj', {
    count,
    add
})
</script>

子組件

<template>
    <div>
        <div>count: {{count}}</div>
        <el-button @click="add">加一</el-button>
    </div>
</template>
<script setup>
import { inject } from 'vue'
const { count, add } = inject('obj')
</script>

slot作用域插槽實(shí)現(xiàn)父子組件傳值

子組件

<!-- <MyComponent> 的模板 -->
<div>
  <slot :text="greetingMessage" :count="1"></slot>
</div>

父組件

當(dāng)父組件需要接收插槽 props 時(shí)，通過子組件標(biāo)簽上的 v-slot 指令，直接接收到了一個(gè)插槽 props 對(duì)象：

<MyComponent v-slot="slotProps">
  {{ slotProps.text }} {{ slotProps.count }}
</MyComponent>

props解構(gòu)：

<MyComponent v-slot="{ text, count }">
  {{ text }} {{ count }}
</MyComponent>

reactive小型store實(shí)現(xiàn)組件間傳值

// utils/store.js
import { reactive } from "vue";
export const store = reactive({
    count: 0,
    increment() {
        this.count++
    }
})

組件1

<template>
    <div>
        <el-button @click="store.increment()">加1</el-button>
    </div>
</template>
<script setup>
    import { ref } from 'vue'
    import { store } from '../utils/store.js'
</script>

組件2

<template>
    <div>
        <div>count: {{store.count}}</div>
    </div>
</template>
<script setup>
    // setup里面引入的變量、方法等都可以在模板中直接訪問 (vue2引入外部的方法在模板中使用需要在methods中暴露)
    import { store } from '../utils/store.js'
</script>

未完待續(xù)......