vue3 official document
-
definePropsanddefineEmitsAll can only be<script setup>Used inCompiler macros. They don't need to import, and they will follow<script setup>The processing process is compiled together. -
definePropsReceive andpropsThe same value as the option,defineEmitsReceive andemitsThe same value as the option.
Father passed on to son - defineProps
Parent component
<template>
<div class="Father">
<p>I'm the parent component</p>
<!-- -->
<son :ftext="ftext"></son>
</div>
</template>
<script setup>
import {ref} from 'vue'
import Son from './'
const ftext = ref('I am the parent component-text')
</script>Subcomponents
<template>
<div class="Son">
<p>I'm a child component</p>
<!-- Shows the value from the parent component -->
<p>Received value：{{ftext}}</p>
</div>
</template>
<script setup>
import {ref} from 'vue'
// setup syntax sugar writing method
//defineProps to receive the component's pass valueconst props = defineProps({
ftext: {
type:String
},
})
</script>Son passes to father - defineEmits
Subcomponents:
<template>
<div class="Son">
<p>I'm a child component</p>
<button @click="toValue">Click to pass the value to the parent component</button>
</div>
</template>
<script setup>
import {ref} from 'vue'
// setup syntax sugar writing method//Use defineEmits() to define the method to throw the child component, syntax defineEmits(['Method to throw'])const emit = defineEmits(['exposeData'])
const stext = ref('I am the value of the child component -ftext')
const toValue = ()=>{
emit('exposeData',stext)
}
</script>Parent component:
<template>
<div class="Father">
<p>I'm the parent component</p>
<!-- -->
<son @exposeData="getData" :ftext="ftext"></son>
</div>
</template>
<script setup>
import {ref} from 'vue'
import Son from './'
const ftext = ref('I am the parent component-text')
const getData = (val)=>{
("Receive the value of the child component",val)
}
</script>
defineExpose
Official explanation:
use<script setup>The component isClosed by default(i.e. referenced through template or$parentPublic instances of components obtained by the chain,Won'tExpose anything in<script setup>binding declared in ).
Can be passeddefineExposeCompiler macros are explicitly specified in<script setup>Attributes to be exposed in the component
Subcomponents:
<template>
<div>
<p>I'm a child component</p>
</div>
</template>
<script setup>
import { ref } from 'vue';
const stext = ref('I am the value of a child component')
const sfunction = ()=>{
("I'm a child component method")
}
defineExpose({
stext,
sfunction
})
</script>Parent component:
<template>
<div class="todo-container">
<p>I'm the parent component</p>
<son ref="sonDom"></son>
<button @click="getSonDom">Click</button>
</div>
</template>
<script setup>
import { ref ,nextTick} from 'vue';
import son from './components/'
const sonDom = ref(null) //Note that the naming here should be consistent with the naming above ref const getSonDom = ()=>{
("sonDom",)
}
// You can't get the value of sonDom directly, and the child component node has not been generated yet nextTick(()=>{
("sonDom",)
})
</script>This is the article about the component transfer parameters of vue3-setup syntax sugar (definedProps, defineEmits, defineExpose). For more related contents of vue3-setup syntax sugar, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!