1、父子组件通过Props传递数据，数据可以为固定数据，也可以多个数据，也可以动态数据
新建Parent.vue组件
1 <template> 2 <h3>Parent</h3> 3 <Child gd_title="Parent传固定数据" gd_title2="传递第二个参数" :dt_title="message"></Child> 4 </template> 5 6 <script> 7 import Child from './Child.vue'; 8 export default{ 9 data(){ 10 return{ 11 message:"传递动态参数" 12 } 13 }, 14 components:{ 15 Child 16 } 17 } 18 </script>
新建Child.vue组件
1 <template> 2 <h3>Child</h3> 3 <p>{{ gd_title }}</p> 4 <p>{{ gd_title2 }}</p> 5 <p>{{ dt_title }}</p> 6 </template> 7 8 <script> 9 export default{ 10 data(){ 11 return{ 12 13 } 14 }, 15 props:["gd_title","gd_title2","dt_title"] 16 } 17 </script>
App.vue引用Parent
1 <template> 2 <!-- 第三步：显示组件 --> 3 <Parent></Parent> 4 </template> 5 6 <script> 7 //第一步：引入组件 8 import Parent from './components/Parent.vue'; 9 //第二步：注入组件 10 export default{ 11 components:{ 12 Parent 13 } 14 } 15 </script>
注意事项：传递参数 只能父传子，不能子传父
2、组件传递多种数据类型
在上述的两个例子中，我们只传入了字符串值，但实际上任何类型的值都可以作为 props 的值被传递。
Number
<!-- 虽然 `20` 是个常量，但是我们还是需要使用 v-bind ，因为这是一个 JavaScript 表达式而不是一个字符串 -->，所以采用动态绑定才可
Boolean
同Number一样，也是需要使用 v-bind赋值
1 Parent.vue 代码 2 3 <template> 4 <h3>----------Parent---------</h3> 5 <Child gd_title="我是固定的String" :dt_title="message" :age="age" 6 :isPublished="isPublished" :names="names" :userInfo="userInfo"></Child> 7 </template> 8 9 <script> 10 import Child from './Child.vue'; 11 export default{ 12 data(){ 13 return{ 14 //动态传String 15 message:"传递动态参数", 16 //动态传Number 17 age:20, 18 //动态传Boolean 19 isPublished:true, 20 //Array 21 names:["iwen","ime","frank"], 22 //Object 23 userInfo:{ 24 name:"Tom", 25 age:24 26 } 27 } 28 }, 29 components:{ 30 Child 31 } 32 } 33 </script>
1 Child.vue代码 2 3 <template> 4 <h3>-------Child-----------</h3> 5 <p>1、固定String：{{ gd_title }}</p> 6 <p>2、动态String：{{ dt_title }}</p> 7 <p>3、Number:{{ age }}</p> 8 <p>4、Boolean:{{ isPublished }}</p> 9 <p>5、数组Array：</p> 10 <ul> 11 <li v-for="(item,index) of names" :key="index">{{ item }}</li> 12 </ul> 13 <p>6、对象Object：{{ userInfo.name }} -- {{ userInfo.age }}-->{{ userInfo }}</p> 14 </template> 15 16 <script> 17 export default{ 18 data(){ 19 return{ 20 21 } 22 }, 23 props:["gd_title","dt_title","age","isPublished","names","userInfo"] 24 } 25 </script>