Vue的Props属性概述
使用 Props 传递数据
组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。
“prop” 是组件数据的一个字段，期望从父组件传下来。子组件需要显式地用 props 选项 声明 props：
Vue.component('child', {// 声明 propsprops: ['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 propsprops: ['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 propsprops: ['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 propsprops: ['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 propsprops: ['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 propsprops: ['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 propsprops: ['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#Props
Vue的Props属性概述相关推荐
- 【Vue】—props属性
[Vue]-props属性 <template><div><h2>Parent</h2><!-- 父子传递数据 --><Son :da ...
- props写法_简单理解vue中Props属性
本文实例为大家解析了vue中Props的属性,供大家参考,具体内容如下 使用 Props 传递数据 组件实例的作用域是孤立的.这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.可以使用 pr ...
- Vue中props属性
props功能:让组件接受外部传过来的数据 (1):传递数据:<Demo name="xxx"/> (2):接受数据: 第一种:(只接收):props: ['name' ...
- Vue组件中的data和props属性
组件中数据的绑定 在vue中数据通过data属性进行绑定,如下 <!DOCTYPE html> <html lang="en"> <head>& ...
- vue 组件，props 属性 ，Vue 生命周期
本文涉及3个内容: 1.vue 组件: 目录结构: 源码分析如下: <div id="container"><h3>爱吃什么水果? app 实例</ ...
- Vue | 使用Vue脚手架 【脚手架的基本使用+ref属性+props属性+mixin混入+插件scoped样式+TodoList+浏览器本地存储+组件的自定义事件+全局事件总线+过度与动画】
文章目录 脚手架的基本使用 初始化脚手架 分析脚手架结构 render函数 修改默认配置 ref属性 props属性 mixin混入 插件 scoped样式 Todo-list案例 组件化编码流程(通 ...
- 前端之vue的ref、props属性和mixin, 插件,局部样式
ref属性与props属性 ref ref作用 使用 ref实例 props 三种方式 数组 -- 简单声明接收 对象 -- 接收并指定属性 对象:{对象} -- 接收+指定属性+默认/必要性 pro ...
- vue中组件的props属性（详）
今天这篇文章,让你彻底学会props属性-- props主要用于组件的传值,他的工作就是为了接收外面传过来的数据,与data.el.ref是一个级别的配置项. 问题一:那props具体是怎么使用呢?原 ...
- Vue中的 props 属性
1.什么是 props props 用于组件的传值,他的工作就是为了接受外面传过来的数据,是一个配置项,与data.el.ref 是一个级别的. 2.props 的使用 --1 先准备子组件 Tex ...
最新文章
- WPF 使用MahApps.Metro UI库
- 标C编程笔记day04 预处理、宏定义、条件编译、makefile、结构体使用
- xadmin的html文件,django xadmin(2) 在xadmin基础上完成自定义页面
- 利用触摸屏获取事件坐标
- centos普通用户修改文件权限_Linux CentOS更改文件的权限与用户及用户组管理命令...
- Spring AOP AspectJ 代码实例
- 【新书推荐】Silverlight 4教程书籍推荐
- 【Oracle】手工建库时启动到nomount状态时错误ORA-09925，ORA-01017
- JAVA8内存最多设置多少,堆内存居高不下，JDK8自适应作怪
- Mybatis通过原生sql查询Map结果集注意事项
- windows多用户远程登录工具 RDPWrap配置
- 计算机专业及软件职称,软件工程师职称评定的级别及标准是什么？
- 贪心科技机器学习训练营（二）
- 数理逻辑(一)：逻辑学初步
- 行列式【线性代数系列（一）】
- 【日记本砸】21.04.16-31 他们身旁也有窗，却没有人向外眺望。
- 用Total Control在电脑操作手机
- 插入, 桥 - 面面相连
- BZOJ - 3687
- html设置文本域的,HTML-文本域属性设置