一、父传子
App.vue
<template>
<div class="countainer" style="display: flex">
<h1>父组件</h1>
<son :toSonData="toSonData" />
</div>
</template>
<script>
import { ref } from 'vue'
import son from './components/son.vue'
export default {
name: 'App',
components: {
son,
},
/**
* 模板中需要的数据和函数,都从setuo里返回
*/
setup() {
// 父组件传给子组件的值
const toSonData = ref(100);
return { toSonData }; // 这里返回的是一个对象
},
}
</script>
son.vue
<template>
<div class="son">子组件</div>
<div>{
{ toSonData }}</div>
</template>
<script>
export default {
name: 'son',
props: {
// 可以定义一个初始类型
toSonData: {