父传子:
父亲发送数据–父组件中使用子组件,在子组件标签上动态传入数据 :money="money"
儿子接收数据–通过单独的props
配置项接收数据 props:{money:{type:Number,default:0}}
。注意在setup中使用props的数据需要在setup中显式传入props参数 setup(props)
子传父:
儿子通过emit()
指定指令名称和传递的数据 emit('change-money',50)
。注意使用emit方法需要在setup中显式引入 setup(props,{emit})
父亲在子组件上通过使用该名称和自己方法绑定,接收数据 @change-money="changeMoneyFather"
。注意此处绑定自己方法不加括号,因为需要接收儿子传入的默认参数
补充setup中第二个参数(https://cn.vuejs.org/api/composition-api-setup.html#setup-context)
export default { setup(props, context) { // 透传 Attributes(非响应式的对象,等价于 $attrs) console.log(context.attrs) // 插槽(非响应式的对象,等价于 $slots) console.log(context.slots) // 触发事件(函数,等价于 $emit) console.log(context.emit) // 暴露公共属性(函数) console.log(context.expose) } }
父传子:
父组件
<template>
<div class="container">
<h1>父组件</h1>
<p>{{money}}</p>
<hr>
<Son :money="money"></Son>
</div>
</template>
<script>
import {ref} from "vue";
import Son from "./Son.vue";
export default {
name: "App",
components:{
Son
},
setup() {
const money=ref(100)
return {money}
},
};
</script>
子组件
<template>
<h1>子组件</h1>
<p>{{money}}</p>
</template>
<script>
export default {
name: "Son",
props:{
money:{
type:Number,
default:0
}
},
setup(props){
console.log(props.money)
}
};
</script>
子传父:
父组件
<template>
<div class="container">
<h1>父组件</h1>
<p>{{money}}</p>
<hr>
+ <Son :money="money" @change-money="updateMoney"></Son>
</div>
</template>
<script>
import {ref} from "vue";
import Son from "./Son.vue";
export default {
name: "App",
components:{
Son
},
setup() {
const money=ref(100)
+ const updateMoney=(newMoney)=>{
+ money.value=newMoney
+ }
return {money,updateMoney}
},
};
</script>
子组件
<template>
<h1>子组件</h1>
<p>{{money}}</p>
+ <button @click="changeMoney">花了50</button>
</template>
<script>
export default {
name: "Son",
props:{
money:{
type:Number,
default:0
}
},
+ setup(props,{emit}){
console.log(props.money)
+ const changeMoney=()=>{
+ emit('change-money',50)
+ }
+ return {changeMoney}
}
};
</script>
原文地址:http://www.cnblogs.com/qiaorr101/p/16796702.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性