深入理解vue中Props属性

最新推荐文章于 2024-08-27 23:21:37 发布
最新推荐文章于 2024-08-27 23:21:37 发布
阅读量1k 收藏 1
点赞数
文章标签： javascript 前端 ViewUI
原文链接：http://www.cnblogs.com/aillabig/p/9786002.html
版权

使用 Props 传递数据

组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。

“prop” 是组件数据的一个字段，期望从父组件传下来。子组件需要显式地用 props 选项 声明 props：

前端精品教程：百度网盘下载

?
1
2
3
4
5
6
7
Vue.component( 'child' , {
  // 声明 props
  props: [ 'msg' ],
  // prop 可以用在模板内
  // 可以用 `this.msg` 设置
  template: '<span>{{ msg }}</span>'
})

然后向它传入一个普通字符串：

<child msg="hello!"></child>

举例

错误写法：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!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 >

正确写法：

前端精品教程：百度网盘下载

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!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             

?
1
2
3
4
5
< div id = "app1" >
< child msg = "hello!" ></ child >
< child nihao = "hello1!" ></ child >
< child nisha = "hello2!" ></ child >
</ div >

JS

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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

?
1
2
3
4
5
< div id = "app1" >
< child msg = "hello!" ></ child >
  < child nihao = "hello1!" ></ child >
  < child nisha = "hello2!" ></ child >
</ div >

JS

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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

?
1
2
3
4
5
< div id = "app1" >
< child msg = "hello!" ></ child >
< child nihao = "hello1!" ></ child >
  < child nisha = "hello2!" ></ child >
</ div >

JS

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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                 

?
1
2
3
4
5
< div id = "app1" >
< child msg = "hello!" ></ child >
< child nihao = "hello1!" ></ child >
< child nisha = "hello2!" ></ child >
</ div >

JS

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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-在中间加入—他前面子组件后面加上，后面的子组件后面加上

转载于:https://www.cnblogs.com/aillabig/p/9786002.html

weixin_30432007
关注
vue中组件的props属性（详）
蜗牛~~
10-28 17万+
今天这篇文章，让你彻底学会props属性…… props主要用于组件的传值，他的工作就是为了接收外面传过来的数据，与data、el、ref是一个级别的配置项。
学习VUE第十一天课程（VUE之组件（VUE之组件（Props特性深析））
weixin_45582846的博客
10-28 458
VUE之组件（Props特性深析） 本节总结罗列下组件传参props的相关细节点，大纲如下 1、Props命名风格 2、Props动态和静态 3、组件参数Props校验 4、非Props特性与Props特性 5、$attrs和inheritAttrs继承属性 Prop命名风格 创建一个博文组件，如果你不能向这个组件传递某一篇博文的标题或内容之类的我们想展示的数据的话，它是没有办法使用的，这也正是 ...
深入理解 Vue.js 中的 Props：从声明到校验，全面提升组件通信效率
最新发布
everfoot的博客
08-27 528
在 Vue.js 的组件化开发中，Props（属性）扮演着至关重要的角色。它们是父组件与子组件之间通信的桥梁，使得数据能够从上层传递到下层。本文将带你深入探讨 Vue.js 中的 Props，从声明到传递细节，再到校验，帮助你编写更加高效和健壮的组件。
vue的props属性的理解
msy7788的博客
09-26 253
在我的理解中，props这个属性就相当于一个桥梁的作用，它是贯穿了父组件和子组件的桥梁，父组件可以通过props这个节点去传输数据到子组件，例子： 父组件的写法： <template> <div> <h1>{{messags}}</h1> <child message="我是逐渐"></child> <child v-bind:message="msg"></child> <child :
对Vue的props的理解
miracle22222的博客
07-30 204
有这么一个场景:有一棵树的组件，其选中的节点（是由数组构成）是由父组件传过去的，选中的节点在一个输入框显示，现在在输入框的X的按钮依次去掉选中节点, 现在遇到的问题是：在我清除组件树选中的节点时，父组件通过props透传的数组也跟着变了。自己迷惑了很久，修改了几个小时都没有修改出来（哈哈哈，自己太菜了），没有找出原因，经过和同事的分析，自己有了想法，觉得组件树的选中节点和我透传过去的数组应该是指向同一个内存的地址，所以，子组件的数据变化，父组件的数据也会跟着变化。所以，得出了一个结论：通过props传递值，
Vue中props的理解与使用
java_Trainees的博客
08-11 238
然后我们的props的作用是暴露属性，例如我们在子组件暴露了一些属性，那我们父组件调用时即可显示出我们父组件中的内容。在理解props之前，我们首先需要明白 父组件 与 子组件的关系，我们父组件需要调用子组件来展示内容。...
Vue props中Object和Array设置默认值操作
10-15
现在让我们深入到具体的代码实例中去理解和掌握如何在Vue.js中为对象和数组类型的props设置默认值。 首先，当我们需要为对象类型的props设置默认值时，应该如下写： ```javascript props: { seller: { type: ...
Vue中用props给data赋初始值遇到的问题解决
10-17
总结来说，当需要在Vue组件中通过props初始化data时，如果props值是动态的，最好使用`computed`属性或者`watch`来确保数据的同步。这是因为props传递给子组件的基本类型值不会自动响应父组件的变化。理解这一点对于...
Vue props属性配置学习
06-09
本篇文章将深入探讨Vue props属性配置的学习，帮助你更好地理解和运用这一功能。 一、Props的基本使用 1. 定义Props 在子组件中，我们通过`props`选项来定义可以接收的props。例如，如果我们希望子组件接受一个名...
解决vue组件props传值对象获取不到的问题
10-16
总结而言，解决Vue组件通过props传递对象，子组件无法获取对象内部属性的问题，关键在于要理解Vue的响应式原理，并使用正确的数据更新和监听方法。通过在父组件中使用`watch`来监控数据变化，并在子组件中通过`watch...
vue props 一次传多个值实例
10-15
此外，文章还提到了props属性值可以接受多种类型，包括数组、对象等。在Vue中，props的定义允许通过类型数组来指定可以接受的数据类型，例如： ```javascript props: { originalData: { type: [Array, Object], ...
Vue.js 源码分析(十三) 基础篇 组件 props属性详解
weixin_30753873的博客
06-27 926
父组件通过props属性向子组件传递数据，定义组件的时候可以定义一个props属性，值可以是一个字符串数组或一个对象。 例如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title...
vue props 属性
weixin_45840253的博客
09-27 244
组件实例优先获取props 接收的值，随后才会对自身的data数据经行处理，我们无法更改props属性的值，但可在data设置一个中转变量接收props的值，对中转变量进行修改 props有三种接收方法 第一种简单模式 props:['接收变量'] 第二种采用对象模式 props: { 变量：变量类型 String ，Number, Object } 第三种 props:{ msg:{ type:Object, required:...
Vue props属性
qq_36770411的博客
05-14 222
功能：让组件接收外部传过来的数据 （1).传递数据 <Demo name="xxx"/> (2).接收数据： 第一种方式：（只接受） props:['name'] 第二种方式（限制类型） props:{ name:Number } 第三种方式（限制类型，限制必要性，指定默认值） props:{ name:{ type:String,//类型 ...
Vue之props属性
程序员青戈
03-05 3938
vue props
Vue中的 props 属性
所行皆坦途
08-11 7354
vue props 的定义的多种方法与注意事项，限制类型、限制默认值、限制不可为空、常见的警告以及解决方案。
Vue中props属性
热门推荐
ss15363380815的博客
11-30 2万+
props功能：让组件接受外部传过来的数据 （1）：传递数据：<Demo name="xxx"/> （2）：接受数据： 第一种：（只接收）：props: ['name'] 第二种：（限制类型）：props:{ name:Number } 第三种：（限制类型，限制必要性，指定默认值）： props: { name: { type: String, requir...
Vue - props属性
Maggieq8324的博客
09-13 1221
目录前言具体应用基本使用确定类型 前言 props用于接收来自父组件的数据 具体应用 基本使用 App.vue <template> <Test :url="url"/> </template> <script> import Test from './components/test.vue' export default { name: 'App', components: { Test }, data: functio
vue组件的props属性
return_MU的博客
02-04 2438
VUE组件的props属性 vue组件可以通过props属性来从父组件获取值 props属性可以有以下几种写法// 数组写法 props: ['title', 'content', 'like'] // 对象写法 - 1 props: { title: String, // 指定title的类型，设置title只能是String类型的 content: undefine, // undefine和null表示content可以是任何类型的 like: [String, Numbe
Vue.js教程：深入理解Props用法
"本文主要介绍了Vue.js中Props属性的使用，包括如何声明和接收props，以及正确的使用方式。通过props，父组件能够将数据传递给子组件，保持组件间的隔离和数据流的单向性。文章还展示了错误和正确的代码示例以帮助...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值