📗 prop属性
prop可以像调用方法那样对组件进行传参,当需要给某一个组件传递prop参数时,这个prop就成为vue组件中的data()对象的一部分,可以直接在组件作用域内使用。
组件可以支持多个(n个)prop属性变量,任意类型都可以传给对应的prop。
📗 示例代码
<htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><scriptsrc="vue3.0.js"></script><title>Document</title></head><body><divid="app"><post-list></post-list></div><script>constvm=Vue.createApp({}) vm.component('PostList', { data() { return { title: '你好gkd' } }, components: { // 面向对象思想: 声明类 {成员变量,成员函数 get() set()}PostItem: { // props是子组件中的属性,:后边是props的属性值prop,prop可以有多个props: ['postTitle'], template: '<h3>{{postTitle}}</h3>' } }, template: '<div><PostItem :postTitle="title"></PostItem></div>' }) vm.mount('#app') </script></body></html>
📗 问题分析
// 问题1:在当前组件内,postlist和postitem哪个是父组件,哪个是子组件,为什么?
答: postlist是父组件,postitem是子组件,因为postitem是在postlist下创建的数据
// 问题2: props属性起到了什么作用?答:1保存数据 2接受传值
// 问题3: 组件间是通过什么传值的,描述数据流向过程,从哪开始到哪结束?父组件向子组件传值 答:PostList.data.title ->PostItem.props.prop(postTile) {{postTitle}}
📗 实现效果