Prop
父组件给子组件传值1
完整案例：05_component/06_p_c_value1.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>父子组件</title> </head> <body> <div id="app"> <my-root></my-root> </div> </body> <template id="root"> <div style="width: 100%;height: 500px;background-color: #ccc;"> <input type="color" v-model="color"> <!-- 在父组件调用子组件的地方，添加自定义的属性， 如果属性的值是变量，boolean类型，number类型，对象，数组，null， undefined,正则， 则需要使用绑定属性 --> <my-box :color="color"></my-box> </div> </template> <template id="box"> <div :style="{ width: '300px', height: '300px', 'background-color': color}"></div> </template> <script src="../lib/vue.global.js"></script> <script> // 在子组件定义的地方，添加props选项 // props 选项主要有2种写法 // 第一种写法为数组，数组的元素即为 父组件传递给子组件的 自定义属性名 // 后续就可以在页面模版种使用 自定义的属性名 渲染了 const Box = { props: ['color'], template: '#box', data () { return { bgColor: '#f66' } } } const Root = { template: '#root', components: { MyBox: Box }, data () { return { color: '#f66' } } } const app = Vue.createApp({ components: { MyRoot: Root } }) app.mount('#app') </script> </html>
虽然上述案例已经完成了父组件给子组件传值，但是不够严谨
可能A负责父组件的编写，B负责了子组件的编写，容易造成 不知道 自定义的属性名的 数据类型
父组件给子组件传值2
完整案例:05_component/07_p_c_value2.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>父子组件</title> </head> <body> <div id="app"> <my-root></my-root> </div> </body> <template id="root"> <div style="width: 100%;height: 500px;background-color: #ccc;"> <input type="color" v-model="color"> <!-- 在父组件调用子组件的地方，添加自定义的属性， 如果属性的值是变量，boolean类型，number类型，对象，数组，null， undefined,正则， 则需要使用绑定属性 --> <my-box :color="color"></my-box> </div> </template> <template id="box"> <div :style="{ width: '300px', height: '300px', 'background-color': color}"></div> </template> <script src="../lib/vue.global.js"></script> <script> // 在子组件定义的地方，添加props选项 // props 选项主要有2种写法 // 第一种写法为数组，数组的元素即为 父组件传递给子组件的 自定义属性名 // 后续就可以在页面模版种使用 自定义的属性名 渲染了 // 第二种写法为对象，对象的 key 值为自定义的属性名， value 值为数据类型 const Box = { // props: ['color'], props: { // color: Number color: String }, template: '#box', data () { return { bgColor: '#f66' } } } const Root = { template: '#root', components: { MyBox: Box }, data () { return { color: '#f66' } } } const app = Vue.createApp({ components: { MyRoot: Root } }) app.mount('#app') </script> </html>
现在只能知道哪一个属性是哪一种数据类型，但是有时候我们可以不需要设置 自定义的属性（. ）
<input /> <===> <input type="text" />
父组件给子组件传值3
完整案例: 05_component/08_p_c_value3.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>父子组件</title> </head> <body> <div id="app"> <my-root></my-root> </div> </body> <template id="root"> <div style="width: 100%;height: 500px;background-color: #ccc;"> <input type="color" v-model="color"> <!-- 在父组件调用子组件的地方，添加自定义的属性， 如果属性的值是变量，boolean类型，number类型，对象，数组，null， undefined,正则， 则需要使用绑定属性 --> <!-- <my-box :color="color"></my-box> --> <my-box ></my-box> </div> </template> <template id="box"> <div :style="{ width: '300px', height: '300px', 'background-color': color}"></div> </template> <script src="../lib/vue.global.js"></script> <script> // 在子组件定义的地方，添加props选项 // props 选项主要有2种写法 // 第一种写法为数组，数组的元素即为 父组件传递给子组件的 自定义属性名 // 后续就可以在页面模版种使用 自定义的属性名 渲染了 // 第二种写法为对象，对象的 key 值为自定义的属性名， value 值为数据类型 // 后续就可以在页面模版种使用 自定义的属性名 渲染了 // 第三种写法为对象， 对象的key值为自定义的属性名， value值又是一个对象 // 对象的key值 包含 type， 代表的是 数据类型 // 对象的key值 包含 default， 代表是 默认值 // 如果 type的类型是 对象和数组，default 写为函数 返回默认的对象和数组 // 对象的key值 包含 required, 代表 该自定义属性是不是 必须传递的 // 对象的key值为 validator， 表示需要自定义验证规则 const Box = { // props: ['color'], // props: { // // color: Number // color: String // }, props: { color: { type: String, default: '#00f', // default () { return { a: 1 }} // required: true, validator: (value) => { return true } } }, template: '#box', data () { return { bgColor: '#f66' } } } const Root = { template: '#root', components: { MyBox: Box }, data () { return { color: '#f66' } } } const app = Vue.createApp({ components: { MyRoot: Root } }) app.mount('#app') </script> </html>
