Vue3组件通信的具体用法实例

<template>
    <div class="father">
        <h2>父组件</h2>
        <!-- 使用自定义属性传统数据 -->
        <Child :text="text" :sayHello="sayHello"></Child>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import Child from './Child.vue';
// state
const text = ref('我是父组件中的数据')
// function
function sayHello() {
    console.log('hello');
}
</script>

<template>
    <div class="child">
        <div>子组件:{{ text }}</div>
        <div>子内容</div>
    </div>
</template>

<script setup>
// 接收父组件传递来的数据
const props = defineProps({
    text: String,
    sayHello: Function
})
// 判断方法是否传递过来，是则执行方法
if (props.sayHello) {
    props.sayHello()
}
</script>

<template>
    <div class="child">
        <div>子组件</div>
        <div>子内容</div>
    </div>
</template>

<script setup>
import { ref } from 'vue';

// state
const childText = ref('我是子组件中的数据')
// function
function sayHelloFather() {
    console.log('hello father');
}
// 将子组件中的数据暴露出去
defineExpose({
    childText,
    sayHelloFather
})
</script>

<template>
    <div class="father">
        <h2>父组件</h2>
        <!-- 使用自定义属性传统数据 -->
        <Child ref="childRef"></Child>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import Child from './Child.vue';

// 接收子组件中传递的数据
const childRef = ref({
    childText: String,
    sayHelloFather: Function
})

// 打印数据
onMounted(() => {
    console.log('childText:', childRef.value?.childText);
    childRef.value?.sayHelloFather()
})
</script>

<template>
    <div class="father">
        <h2>父组件</h2>
        <div>{{ content }}</div>
        <Child v-model:content="content"></Child>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import Child from './Child.vue';

const content = ref('content')
</script>

<template>
    <div class="child">
        <div>子组件</div>
        <input type="text" :value="prop.content" @input="handleInput">
    </div>
</template>

<script setup>
// 接收父组件传递过来的数据
const props = defineProps({
    content: String
})

const emits =  defineEmits(['update:content'])
function handleInput(e) {
    const target = e.target.value
    // 通知父组件修改数据
    emits('update:content', target)
}
</script>

<template>
  <div class="app">
    <Father></Father>
  </div>
</template>

<script setup>
import { provide, ref } from 'vue';
import Father from './components/Father.vue';

// state
const grandFatherData = ref('我是App.vue中的数据，也就是你爷爷辈')
// function
function sayHello() {
  console.log('hello');
}
provide('appData', { grandFatherData, sayHello })
</script>

<template>
    <div class="child">
        <div>子组件</div>
        <div>app.vue传来的数据：{{ data.grandFatherData }}</div>
    </div>
</template>

<script setup>
import { inject, onMounted } from 'vue';

const data = inject('appData')

onMounted(()=>{
    data.sayHello()
})
</script>