第一种非语法糖格式:
<div>
parent父组件
{{ msg }}
<mycom1 :msg="msg" a="1" b="2" c="3" d="4" @addd="addd"></mycom1>
</div>
</template>
<script>
import mycom1 from "@/components/mycom1.vue";
import { ref } from "vue";
// 非语法糖的格式写
export default {
components: {
mycom1,
},
setup() {
const msg = ref(12);
const addd = () => {
msg.value++;
}
// return 返回出去,注意这里只能写一个return
return {
msg,
addd
}
},
};
子组件
<template>
<div>
子组件
<h3>{{ a }}--{{ b }}--{{ msg }}</h3>
<!-- 添加事件 -->
<button @click="add">添加</button>
</div>
</template>
<script>
// 非语法糖结构的书写
export default {
props: ['msg', 'a', 'b'],
// setup中有两个参数,分别是props,context
// props表示传过来的数据,打印的是 Proxy(Object)
// context表示一个上下文对象
// context中有四个属性,分别是attrs,slots,emit,expose
// attrs表示的是父组件传递过来的props,
// slots表示的是父组件传递过来的插槽
// emit表示的是触发自定义事件
setup(props, context) {
console.log(props)
console.log(context)
//父传子点击添加父组件中的数据
const add = () => {
context.emit('addd')
}
// return 返回
return { add }
},
}
</script>
<style lang="scss" scoped></style>
第二种语法糖格式父子传参: