Vue组件传值的方式:1、父传子;2、子传父;3、兄弟传值;4、问号传值,冒号传值和父子组件传值;5、使用“$ref”传值;6、使用“inject”给当前实例注入父组件的数据;7、祖传孙;8、孙传祖;9、$parent;10、session
Vue组件传值的方式:1、父传子;2、子传父;3、兄弟传值;4、问号传值,冒号传值和父子组件传值;5、使用“$ref”传值;6、使用“inject”给当前实例注入父组件的数据;7、祖传孙;8、孙传祖;9、$parent;10、sessionStorage传值;11、vuex。
父组件传给子组件
在子组件里定义一个props,即props:[‘msg’],msg可以是对象也可以是基本数据类型
如果你想定义一个默认值,即 props:{msg: {type: String, default: ‘hello world’}},
若默认值是对象类型:props: { msg: { type: Object, default: () => { return { name: ‘dan_seek’ } } }}
需要注意的是这种传值是单向的,你无法改变父组件的值(当然引用类型例外);而且如果直接修改props的值会报一个警告。
推荐的写法是在data()里重新定义一个变量(见Children.vue),并把props赋值给它,当然计算属性也行。
Children.vue
<template> <section> 父组件传过来的消息是:{{myMsg}} </section></template><script> export default { name: "Children", components: {}, props:['msg'], data() { return { myMsg:this.msg } }, methods: {} }</script>
--结束END--
本文标题: vue组件传值的方式
本文链接: https://www.lsjlt.com/news/362563.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0