vue3 setup语法糖组件通信

defineProps、defineEmits、defineExpose这三种方式都是不需要引入的。

父传子defineProps

代码

<!-- 父组件 -->
<template>
    <div>
        <child :title="title"></child>
    </div>
</template>
<script setup>
import {ref} from 'vue'
import child from './child.vue'
const title = ref('儿子,爹给你的标题')
</script>


<!-- 子组件 -->
<template>
    <div>
       <p>接收到的值：{{title}}</p>
    </div>
</template>
<script setup>
//defineProps 来接收父组件传进来的值
const props = defineProps({
    title: {
        type:String
    },
})   
</script>

效果展示

子传父defineEmits

代码

<!-- 父组件 -->
<template>
    <div>
        <child @getdata="getdata" :title="title"></child>
        <div>{{ text }}</div>
    </div>
</template>
<script setup>
import {ref} from 'vue'
import child from './child.vue'
const title = ref('儿子,爹给你的标题');
let text=ref('');
const getdata=(val)=>{
    text.value=val;
}
</script>


<!-- 子组件 -->
<template>
    <div>
       <p>接收到的值：{{title}}</p>
    </div>
</template>
<script setup>
//defineProps 来接收父组件传进来的值
const props = defineProps({
    title: {
        type:String
    },
})
//defineEmits 来接收父组件传进来的方法
const emit = defineEmits(['getdata']);
// 给父组件传递值
emit('getdata','我不认识你别瞎攀亲戚')
</script>

效果展示

属性暴露defineExpose

defineExpose可以指定在 <script setup> 组件中要暴露出去的属性。

使用该属性也可以完成父传子，子传父。特殊的地方是：

父传子是调用子组件的方法，子传父是直接获取子级暴露出来的内容。

代码

<!-- 父组件 -->
<template>
    <div>
        <p>子组件的值：{{ text }}</p>
        <child ref="childref"></child>
        <button @click="changeChild">点击</button>
    </div>
</template>
<script setup>
import { ref, nextTick } from 'vue';
import child from './child.vue'
const childref = ref(null)
//直接打印sonDom的值是拿不到的，子组件节点还没生成
let text=ref('');
nextTick(() => {
    text=childref.value.text;
})
const changeChild=()=>{
    childref.value.say('告诉你：你是傻瓜')
}
</script>


<!-- 子组件 -->
<template>
  <div>
    <p>我是子组件</p>
    <p>告诉我啥？</p>
    <p>{{ sayText }}</p>
  </div>
</template>
<script setup>
import { ref } from "vue";
const text = ref("我是子组件的值");
let sayText=ref('');
const say = (text) => {
  sayText.value=text
};
defineExpose({
  text,
  say,
});
</script>

效果展示

点击前	点击后