wordpress 分享 网站,珠海正规网站制作合作,整站优化温州怎么做?,西安做网站找缑阳建组件与组件之间不是完全独立的#xff0c;而是有交集的#xff0c;那就是组件与组件之间是可以传递数据的 传递数据的解决方案就是props 父级#xff1a;
在父级中引入子集
templateh3Parent/h3Child/
/templatescript
i… 组件与组件之间不是完全独立的而是有交集的那就是组件与组件之间是可以传递数据的 传递数据的解决方案就是props 父级
在父级中引入子集
templateh3Parent/h3Child/
/templatescript
import Child from ./Child.vue
export default {data() {return{}},components:{Child}
}
/script
而父级在App里引入
templateParent//templatescriptimport Parent from ./components/Parent.vueexport default {components:{Parent}
}
/scriptstyle/style
父级将数据传送给子集在父级中Child titleParent数据/写出如下代码
而在子级组件中如下编写
templateh3Child/h3p{{ title }}/p!-- 用模板语法的方式让其显示 --
/templatescript
export default {data() {return{}},props:[title]//在这里以字符串形式存在
}
/script 成功传入
当然也可以传递多个数据且传递的数量没有限制
父级中
子集中
templateh3Child/h3p{{ title }}/pp{{ demo }}/p!-- 用模板语法的方式让其显示 --
/templatescript
export default {data() {return{}},props:[title,demo]//在这里以字符串形式存在
}
/script
动态数据传递
通过下面代码就可以实现动态数据传递
templateh3Parent/h3Child :title message /!-- v-bind把后面变成动态的数据 --
/templatescript
import Child from ./Child.vue
export default {data() {return{message:Parent数据!}},components:{Child}
}
/script
成功 注意事项 proos传递数据只能从父级传递到子集不能反其道而行
