|
一、父传子
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: {
type: Number,
default: 0
}
},
setup(props) {
// 直接可以在props里面拿到父组件传过来的值
console.log(props.toSonData);
}
}
</script>
二、子传父
son.vue
<template>
<div class="son">子组件</div>
<div>父组件传给我的值：{{ toSonData }}</div>
<button @click="changeAppData">点我子组件修改父组件的值</button>
</template>
<script>
export default {
name: 'son',
emits: ['sonChangeData'],
props: {
// 可以定义一个初始类型
toSonData: {
type: Number,
default: 0
}
},
setup(props, { emit }) {
// 直接可以在props里面拿到父组件传过来的值
console.log(props.toSonData);
const changeAppData = () => {
emit('sonChangeData', 50);
}
return { changeAppData }
}
}
</script>
App.vue
<template>
<div class="countainer" style="display: flex">
<h1>父组件</h1>
<div>父组件传给子组件的值： {{ toSonData }}</div>
<son :toSonData="toSonData" @sonChangeData="updataSonData" />
</div>
</template>
<script>
import { ref } from 'vue'
import son from './components/son.vue'
export default {
name: 'App',
components: {
son,
},
/**
* 模板中需要的数据和函数，都从setuo里返回
*/
setup() {
// 父组件传给子组件的值
let toSonData = ref(100);
const updataSonData = (newValue) => {
console.log(newValue);
toSonData.value = newValue;
}
return { toSonData, updataSonData }; // 这里返回的是一个对象
},
}
</script>
需要注意的是要添加emits，不然会有警告
|