父子组件传值vue2版本:
父组件:
<template> <div id="app"> <hello-world :title="aa" :likes="likes" :isPublished="false" :callback="aaa" @show="bbb"></hello-world> // 由attr来传入对应的,以@事件名来接受子组件所传过来的值 </div> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'app', components: { HelloWorld }, data() { return{ aa: "这里是标题", likes: 7, } }, methods:{ aaa: function () { return this.likes++; }, bbb:function (a) { console.log(a) let sum = 0; a.forEach(element => { sum+=element; }); console.log(sum) } } } </script>
子组件:
<template> <div> <p @click="callback" >{{title}}{{likes}}</p> <p v-if="isPublished">{{likes}}</p> <p @click="dorpFont"> 传值给父组件 </p> // 传值给父组件 </div> </template> <script> export default { name: 'HelloWorld', // props:["title"], props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function,
demo:{
type:// 规定值的类型
default: // 不传值的情况下的值
required: // 是否能为空
validator: // 自定义验证
contactsPromise: Promise // 或任何其他构造函数,这里没有每一项都写上根据需要写上对应的名字即可,后面的数据类型为此处的数据类型要求。可不写. }, // emit:['show',this.parmars], data(){ return { parmars:[3,4,5,6] } }, mounted(){ console.log(this.title); }, methods:{ dorpFont(){ this.$emit('show', this.parmars);// 第一个参数为父组件中的事件属性,父组件上为@show此处则为show,后面参数为所传递的值。 } } } </script>
vue3版本:
vue3版本中vue2的写法仍旧可以用不过vue3中添加了一个setup的方法,此处展示的就是这个方法。另外setup传值时无法访问data,methods等,只可访问props,emit,attrs,slots。
子组件:
props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise: Promise // 或任何其他构造函数 }, setup(props, { emit }) { //此处第二个参数为context,可解构为{attrs,slots,emit},props为响应式的不可解构,有需要可用toRef const likes = reactive(props.likes);
const { aaaa } = toRefs(props); //console.log(aaaa.value)
const aaa = toRefs(props,'aaa'} //console.log(aaa.value) const title = reactive(props.title); const isPublished = reactive(props.isPublished); const callback = reactive(props.callback); const dorpFont = () => { context.$emit('show', {parmars:[3,4,5,6]}); } return { likes, title, isPublished, callback, dorpFont, } }, // 只多了一个setup,其他没有改变
父组件:
setup(){ const title = ref("这里是标题"); const likes = ref(7); const isPublished = ref(false); // const callback = ref(aaa); 此处的aaa为事件,考虑到可能不能传输,故此注释,可直接写function在里面传入 function bbb(params) { let sum = 0; a.forEach(element => { sum+=element; }); return sum } return { title, likes, isPublished, bbb, } },
在翻看文档的时候有一个疑惑就是vue3中这一部分文档没有写出父组件的写法,然后百度出来的结果中也没有在setup中的props传递动态数据的样例,所以关于动态数据的传输希望有人解惑,(setup中的props是响应式的是否代表可以在data,mounted等中对传输的值做出更改,利用其响应式的性质传输动态数据?)