来源:未知 时间:2018-11-04 15:10 作者:小飞侠 阅读:次
[导读] 使用 Props 传递数据 组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。 “prop” 是组件数据的一个字段...
使用 Props 传递数据 组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。 “prop” 是组件数据的一个字段,期望从父组件传下来。子组件需要显式地用 props 选项 声明 props: Vue.component('child', { // 声明 props props: ['msg'], // prop 可以用在模板内 // 可以用 `this.msg` 设置 template: '<span>{{ msg }}</span>' }) 然后向它传入一个普通字符串: <child msg="hello!"></child> 举例 错误写法: <!DOCTYPE html> <html lang="en"> <head> <script type="text/javascript" src="./vue.js"></script> <meta charset="UTF-8"> <title>vue.js</title> </head> <body> <pre> //使用 props 传输资料予子组件 //props , data 重复名称会出现错误 </pre> <div id="app1"> <child mssage="hello!"></child> </div> <script> Vue.config.debug = true; Vue.component('child', { // declare the props props: ['msg','nihao','nisha'], // the prop can be used inside templates, and will also // be set as `this.msg` template: '<span>{{ msg }}{{nihao}}{{nisha}}</span>', data: function() { return { mssage: 'boy' } } }); var vm = new Vue({ el: '#app1' }) </script> </body> </html> 正确写法: <!DOCTYPE html> <html lang="en"> <head> <script type="text/javascript" src="./vue.js"></script> <meta charset="UTF-8"> <title>vue.js</title> </head> <body> <pre> //使用 props 传输资料予子组件 //props , data 重复名称会出现错误 </pre> <div id="app1"> <child mssage="hello!"></child> </div> <script> Vue.config.debug = true; Vue.component('child', { // declare the props props: ['msg','nihao','nisha'], // the prop can be used inside templates, and will also // be set as `this.msg` template: '<span>{{ msg }}{{nihao}}{{nisha}}</span>' }); var vm = new Vue({ el: '#app1' }) </script> </body> </html> props 传入多个数据(顺序问题) 第一种: HTML <div id="app1"> <child msg="hello!"></child> <child nihao="hello1!"></child> <child nisha="hello2!"></child> </div> JS Vue.config.debug = true; Vue.component('child', { // declare the props props: ['msg','nihao','nisha'], // the prop can be used inside templates, and will also // be set as `this.msg` template: '<span>{{ msg }}{{nihao}}{{nisha}}</span>', /*data: function() { return { msg: 'boy' } }*/ }); var vm = new Vue({ el: '#app1' }) 结果:hello! hello1! hello2! 第二种: HTML <div id="app1"> <child msg="hello!"></child> <child nihao="hello1!"></child> <child nisha="hello2!"></child> </div> JS Vue.config.debug = true; Vue.component('child', { // declare the props props: ['msg','nihao','nisha'], // the prop can be used inside templates, and will also // be set as `this.msg` template: '<span>123{{ msg }}{{nihao}}{{nisha}}</span>', /*data: function() { return { msg: 'boy' } }*/ }); var vm = new Vue({ el: '#app1' }) 结果:123hello! 123hello1! 123hello2! 第三种: HTML <div id="app1"> <child msg="hello!"></child> <child nihao="hello1!"></child> <child nisha="hello2!"></child> </div> JS Vue.config.debug = true; Vue.component('child', { // declare the props props: ['msg','nihao','nisha'], // the prop can be used inside templates, and will also // be set as `this.msg` template: '<span>{{ msg }}{{nihao}}{{nisha}}123</span>', /*data: function() { return { msg: 'boy' } }*/ }); var vm = new Vue({ el: '#app1' }) 结果:hello! 123 hello1! 123 hello2!123 第四种: HTML <div id="app1"> <child msg="hello!"></child> <child nihao="hello1!"></child> <child nisha="hello2!"></child> </div> JS Vue.config.debug = true; Vue.component('child', { // declare the props props: ['msg','nihao','nisha'], // the prop can be used inside templates, and will also // be set as `this.msg` template: '<span>{{ msg }}123{{nihao}}{{nisha}}123</span>', /*data: function() { return { msg: 'boy' } }*/ }); var vm = new Vue({ el: '#app1' }) 结果:hello! 123 123hello1! 123hello2! 结论: 在props 中传入多个数据是,如果在父组件的模板类添加其他元素或者字符会有: 2-在最后面加入—每个子组件渲染出来都会在其后面加上 3-在中间加入—他前面子组件后面加上,后面的子组件后面加上 请大家多多支持自学php网,zixuephp.com |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com