vue中父组件给子组件传值的三种方法
作者：互联网
顺序.............................................
-------------列表组件，注册组件、调用使用组件-----------------
1，子组件可能很多地方用得到，所有子组件的数据来源来自父组件
父组件在调用子组件的地方，添加一个自定义的属性，属性的值就是需要传递给子组件的值,如果需要传递的值是一个变量，或者是boolean，或者是number类型，需要使用绑定属性
<my-list :list="list" :num="list.length"></my-list>
* 在子组件定义的地方，添加一个选项 props,方式一 props的值为数组，元素为自定义的属性名
const List = {
props: ['list'],
template: '#list'
}
可以在子组件中通过 自定义的属性名就可以拿到父组件传递的数据
2，子组件可能很多地方用得到，所有子组件的数据来源来自父组件
父组件在调用子组件的地方，添加一个自定义的属性，属性的值就是需要传递给子组件的值,如果需要传递的值是一个变量，或者是boolean，或者是number类型，需要使用绑定属性
<my-list :list="list" :num="list.length"></my-list>
* 在子组件定义的地方，添加一个选项 props, props的值是一个对象,key值为自定义的属性名，value值为数据类型 ---- 团队合作 提升代码的严谨性，如果数据类型不对，会有警告信息出现，但是不会阻止你的代码的渲染
const List = {
props: {
list: Number ！--（数据类型不对，数据依然会显示，但会警告（报错））
},
template: '#list'
}
可以在子组件中通过 自定义的属性名就可以拿到父组件传递的数据
3，子组件可能很多地方用得到，所有子组件的数据来源来自父组件
父组件在调用子组件的地方，添加一个自定义的属性，属性的值就是需要传递给子组件的值,如果需要传递的值是一个变量，或者是boolean，或者是number类型，需要使用绑定属性
<my-list :list="list" :num="list.length"></my-list>
在子组件定义的地方，添加一个选项 props, props的值是一个对象, key值是自定义的属性名，value值为一个对象，这个对象的key值分别为 type 和 default,表示数据类型和默认值,如果数据类型是 对象和 数组，默认值必须写为函数，其余直接赋值
const List = {
props: {
list: {
type: Array,
default: function () {
}
}
},
template: '#list'
}
可以在子组件中通过 自定义的属性名就可以拿到父组件传递的数据
-----------------------------------------------------以下是一段完整代码---------------------------------
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
33 </head>
34 <body>
35 <div id="app">
36 <my-content :shop='list' :num="list.length"></my-content>
37 </div>
38 </body>
39 <template id="content">
40 <ul>
41 <li v-for="(item, index) of shop" :key = 'index'>
42 <img :src="item.img" alt="">
43 <p>{{ item.title }}</p>
44 </li>
45 </ul>
46 </template>
47 <script src="../vue.js"></script>
48 <script>
49 //------第一种方法----------------
50 // const Content = {
51 // props: ['shop'],
52 // template: "#content"
53 // }
54 //------第二种方法----------------
55 // const Content = {
56 // props: {
57 // shop: Array
58 // },
59 // template: "#content"
60 // }
61 //------第三种方法----------------
62 const Content = {
63 template: "#content",
64 props: {
65 shop: {
66 type: Array,
67 default: function () {
68
69 }
70 }
71 }
72 }
73 new Vue({
74 el: '#app',
75 data: {
76 list: [{
77 img: 'https://img12.360buyimg.com/n7/jfs/t1/59022/28/10293/141808/5d78088fEf6e7862d/68836f52ffaaad96.jpg',
78 title: 'Apple iPhone 11 (A2223) 128GB 黑色 移动联通电信4G手机 双卡双待'
79 }, {
80 img: 'https://m.360buyimg.com/mobilecms/s750x750_jfs/t23386/9/1066712099/277967/615ccafb/5b4f0e3aN262237fc.jpg!q80.dpg.webp',
81 title: '【官方AppleCare+版】Apple MacBook Pro 15.4英寸笔记本电脑 深空灰色 配备Touch Bar 2018新款(八代i5/16G)'
82 }, {
83 img: 'https://img13.360buyimg.com/n7/jfs/t1/51521/12/10437/169738/5d780c40Eda0f0e1d/ccbc7745b343f87d.jpg',
84 title: 'Apple iPhone 11 Pro Max (A2220) 256GB 暗夜绿色 移动联通电信4G手机 双卡双待'
85 }, {
86 img: 'https://img11.360buyimg.com/n7/jfs/t1/53688/36/14138/113224/5db03763Ee6d8b784/5f5a3f4ce7490d36.jpg',
87 title: '【超级爆品】一加 OnePlus 7 Pro 2K+90Hz 流体屏 骁龙855旗舰 4800'
88 }]
89 },
90 components: {
91 'my-content': Content
92 }
93 })
94 </script>
95 </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> ul li { list-style: none; } * { margin: 0; padding: 0; } #app { width: 1000px; margin: 0 auto; } #app ul { width: 100%; display: flex; justify-content: space-between; } #app ul li { width: 25%; padding: 25px; } #app ul li img { height: 200px; width: 200px; } </style> </head> <body> <div id="app"> <my-content :shop='list' :num="list.length"></my-content> </div> </body> <template id="content"> <ul> <li v-for="(item, index) of shop" :key = 'index'> <img :src="item.img" alt=""> <p>{{ item.title }}</p> </li> </ul> </template> <script src="../vue.js"></script> <script> //------第一种方法---------------- // const Content = { // props: ['shop'], // template: "#content" // } //------第二种方法---------------- // const Content = { // props: { // shop: Array // }, // template: "#content" // } //------第三种方法---------------- const Content = { template: "#content", props: { shop: { type: Array, default: function () {
} } } } new Vue({ el: '#app', data: { list: [{ img: 'https://img12.360buyimg.com/n7/jfs/t1/59022/28/10293/141808/5d78088fEf6e7862d/68836f52ffaaad96.jpg', title: 'Apple iPhone 11 (A2223) 128GB 黑色 移动联通电信4G手机 双卡双待' }, { img: 'https://m.360buyimg.com/mobilecms/s750x750_jfs/t23386/9/1066712099/277967/615ccafb/5b4f0e3aN262237fc.jpg!q80.dpg.webp', title: '【官方AppleCare+版】Apple MacBook Pro 15.4英寸笔记本电脑 深空灰色 配备Touch Bar 2018新款(八代i5/16G)' }, { img: 'https://img13.360buyimg.com/n7/jfs/t1/51521/12/10437/169738/5d780c40Eda0f0e1d/ccbc7745b343f87d.jpg', title: 'Apple iPhone 11 Pro Max (A2220) 256GB 暗夜绿色 移动联通电信4G手机 双卡双待' }, { img: 'https://img11.360buyimg.com/n7/jfs/t1/53688/36/14138/113224/5db03763Ee6d8b784/5f5a3f4ce7490d36.jpg', title: '【超级爆品】一加 OnePlus 7 Pro 2K+90Hz 流体屏 骁龙855旗舰 4800' }] }, components: { 'my-content': Content } }) </script> </html>
标签：vue,const,自定义,title,中父,props,组件,属性 来源： https://www.cnblogs.com/shun1015/p/11748090.html