简单理解vue中Props属性_javascript技巧
2017-08-22 01:16
986 查看
简单理解vue中Props属性_javascript技巧
摘要: 本文讲的是简单理解vue中Props属性_javascript技巧, 本文实例为大家解析了vue中Props的属性,供大家参考,具体内容如下 使用 Props 传递数据 组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。 “prop
转发抽手机 云计算 大数据 建站 备案 文档 域名 whois查询 文集 主题
本文实例为大家解析了vue中Props的属性,供大家参考,具体内容如下
使用 Props 传递数据
组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。
“prop” 是组件数据的一个字段,期望从父组件传下来。子组件需要显式地用 props 选项 声明 props:
然后向它传入一个普通字符串:
<child msg="hello!"></child>
举例
错误写法:
正确写法:
props 传入多个数据(顺序问题)
第一种:
HTML
JS
结果:hello! hello1! hello2!
第二种:
HTML
JS
结果:123hello! 123hello1! 123hello2!
第三种:
HTML
JS
结果:hello! 123 hello1! 123 hello2!123
第四种:
HTML
JS
结果:hello! 123 123hello1! 123hello2!
结论:
在props 中传入多个数据是,如果在父组件的模板类添加其他元素或者字符会有:
1-在最前面加入—每个子组件渲染出来都会在其前面加上
2-在最后面加入—每个子组件渲染出来都会在其后面加上
3-在中间加入—他前面子组件后面加上,后面的子组件后面加上
参考: http://cn.vuejs.org/guide/components.html
本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持云栖社区。
以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索vue props vue.js props 理解、vue props、vue props传值、vue.js props、vue props 传对象,以便于您获取更多的相关知识。
摘要: 本文讲的是简单理解vue中Props属性_javascript技巧, 本文实例为大家解析了vue中Props的属性,供大家参考,具体内容如下 使用 Props 传递数据 组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。 “prop
转发抽手机 云计算 大数据 建站 备案 文档 域名 whois查询 文集 主题
本文实例为大家解析了vue中Props的属性,供大家参考,具体内容如下
使用 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 中传入多个数据是,如果在父组件的模板类添加其他元素或者字符会有:
1-在最前面加入—每个子组件渲染出来都会在其前面加上
2-在最后面加入—每个子组件渲染出来都会在其后面加上
3-在中间加入—他前面子组件后面加上,后面的子组件后面加上
参考: http://cn.vuejs.org/guide/components.html
本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持云栖社区。
以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索vue props vue.js props 理解、vue props、vue props传值、vue.js props、vue props 传对象,以便于您获取更多的相关知识。
相关文章推荐
- 简单理解vue中Props属性
- 简单理解javascript中的原型对象,实现对之间共享属性和行为
- javascript 中arguments、call、apply、bind、callee、caller属性的简单理解
- 理解Vue 2.0 的ref属性及简单用法
- 简单理解vue中实例属性vm.$els
- 简单理解javascript中的原型对象,实现对之间共享属性和行为
- 简单理解vue中track-by属性
- Vue系列: 如何通过组件的属性props设置样式
- 对象作为 props 传递所有的属性理解
- JavaScript 简单项目应用技巧
- JavaScript中作用域和作用域链的简单理解(变量提升)
- 简单理解js的prototype属性及使用
- 深入理解javascript描述元素内容的5个属性
- 全面理解Javascript中Function对象的属性和方法
- javascript 理解对象--- 属性类型
- (译文)12个简单(但强大)的JavaScript技巧(一)
- 简单理解JavaScript中的原型
- JavaScript实现简单的双向数据绑定(Ember、Angular、Vue)
- Javascript的堆和栈的简单理解