vuejs使用 Props 传递数据

最新推荐文章于 2025-07-05 13:44:41 发布
最新推荐文章于 2025-07-05 13:44:41 发布
阅读量1.6k 收藏
点赞数
分类专栏： Vue/Vux
本文介绍了如何在 Vue.js 中使用 Props 传递数据给子组件。详细讲解了正确声明 Props 的方式，并通过示例展示了不同的数据传递方法及其渲染结果，强调了在传递多个数据时应注意的顺序问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

使用 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-在中间加入—他前面子组件后面加上，后面的子组件后面加上

参考： http://cn.vuejs.org/guide/components.html#Props

本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

【Vue.js基础】6、组件通信：Props与事件
weixin_52938153的博客
05-27 919
Vue.js是一个由尤雨溪（Evan You）开发的渐进式JavaScript框架，专注于构建用户界面。凭借其简单易用的API和灵活的架构，Vue.js能够轻松集成到项目中，也可以用于开发复杂的单页应用（SPA）。Vue.js采用双向数据绑定和基于组件的开发模式，显著提升了开发效率和代码复用性。其丰富的生态系统，包括Vue CLI、Vue Router和Vuex等工具，使得Vue.js成为现代Web开发中备受欢迎的选择。无论是初学者还是经验丰富的开发者，Vue.js都提供了强大的功能和极佳的开发体验。
Vuejs 组件——props数据传递的实例代码
10-20
在使用props传递数据时，若没有使用v-bind指令，我们传递的是字面量值，即使这个值看起来像是数字或者布尔值，它也会被作为字符串处理。而使用v-bind后，我们就可以传递JavaScript表达式，这允许我们传递变量，甚至...
Vue组件选项props
weixin_34227447的博客
08-18 352
前面的话 　　组件接受的选项大部分与Vue实例一样，而选项props是组件中非常重要的一个选项。在 Vue 中，父子组件的关系可以总结为 props down, events up。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。本文将详细介绍Vue组件选项props   父子级组件 　　在介绍props之前，先介绍父子级组件的写法 　　在一...
Vue2——父组件给子组件传值
最新发布
weixin_63215361的博客
07-05 862
props是Vue组件通信中最基础的方式之一，用于父组件向子组件传递数据。props是子组件上的自定义属性，父组件可以通过这些属性向子组件传递数据。核心特点单向数据流：数据只能从父组件流向子组件，子组件不能直接修改props可预测性：明确声明需要接收的数据，使组件接口清晰验证机制：可以指定数据类型、默认值和验证规则灵活性：支持多种数据类型，包括基本类型、对象、数组和函数使用流程父组件在引用子组件时，通过属性传递数据子组件在props选项中声明接收的数据。
Vue.js 组件间值传递(props)
心安.的博客
10-09 575
简单接收 子组件配置 <template> <div class="item"> <h2>{{title}}</h2> <p>{{content}}</p> <hr> <span>{{aouthor}}</span> <span>{{views}}</span> <span>{{msg}}</s...
Vue.js中props的使用
种麦南山下的博客
10-12 5832
父组件通过 props 向下传递数据给子组件；子组件通过 events 给父组件发送消息。
vue.js props选项
虬川候的博客
10-30 299
props选项 作用 : props选项用来声明他期待获得的数据 props本质 : props为元素属性 用事件改变props时方法后无需写小括号 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;
Vuejs第九篇之组件作用域及props数据传递实例详解
10-21
`props`是Vue.js中用于从父组件向子组件传递数据的一种机制。这允许父组件控制子组件的某些属性。让我们详细了解一下如何使用`props`。 1. **绑定静态数据**：通过在父组件的自定义元素上直接设置属性值，可以传递...
vuejs动态组件给子组件传递数据的方法详解
10-21
在常规的子组件使用场景中，我们可以在子组件定义时声明所需的`props`，然后在父组件中通过绑定属性来传递数据。例如： ```html <child-component :user-name="parentUserName" :DOB="parentDOB"></child-component...
关于Vue中props的详解
热门推荐
jingtian678的博客
07-23 14万+
看一下官方文档： 组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。 也就是props是子组件访问父组件数据的唯一接口。 详细一点解释就是： 一个组件可以直接在模板里面渲染data里面的数据（双大括号）。 子组件不能直接在模板里面渲染父元素的数据。 如果子组件想要引用父元素的数据，那么就在...
深入理解 Vue.js 中的 Props：从声明到校验，全面提升组件通信效率
everfoot的博客
08-27 685
在 Vue.js 的组件化开发中，Props（属性）扮演着至关重要的角色。它们是父组件与子组件之间通信的桥梁，使得数据能够从上层传递到下层。本文将带你深入探讨 Vue.js 中的 Props，从声明到传递细节，再到校验，帮助你编写更加高效和健壮的组件。
Vue.JS中的props
m0_57417006的博客
12-10 442
中的值，因为它们被视为来自父组件的不可变的数据。如果子组件需要修改这些数据，可以通过触发事件来通知父组件，从而由父组件修改。如果父组件的数据发生变化，这将会反映在子组件中。这是一种单向数据流的机制，用于在组件之间传递信息。选项来声明它所接收的属性，并在模板中使用这些属性。机制有助于组件之间的解耦和复用，使得组件更容易理解和维护。是一种用于父组件向子组件传递数据的机制。以下是一个简单的示例，演示了如何在Vue.js中使用。向子组件传递数据，子组件通过接收这些。在这个例子中，父组件通过将。
reactjs入门到实战（五）---- props详解
afk46847的博客
06-05 154
1》》》基础的props使用 不可修改父属性 getDefaultProps 对于外界/父组件的属性值，无法直接修改，它是只读的。 <script type="text/babel"> var Hello = React.createClass({ getDefaultProps:functi...
Vue.js中的props
qq_43536788的博客
03-13 566
在 Vue.js 中，props是用于组件间通信的一种机制。它允许父组件向子组件传递数据。子组件通过声明props来定义它期望从父组件接收哪些数据。这些数据可以是任何类型，包括字符串、数字、布尔值、数组、对象甚至是其他 Vue 组件。
Vue的props
qq_50260510的博客
06-07 3925
Vue的props
vue数据传递-----props
syj1127_的博客
04-01 594
对于引用数据Object类型 的person， 子组件收到person后， 修改了 person 中 name的属性值，然后子组件和父组件中的数据同时发生了改变。子组件给父组件传递数据，即 父组件先 定义一个函数，然会将函数传递给子组件。可以发现， 对于基本类型 String 类型的 msg ，子组件收到后修改msg ，仅仅修改了自己的数据，父组件中的msg并没有改变。的数据，子组件收到object数据后，修改object中的属性值，那子组件和父组件中的object数据将会。如果父组件传递给子组件一个。
vue.js props详解
猿码互联
12-31 392
在 Vue.js 中，props 是一种用于父组件向子组件传递数据的机制。通过在子组件中声明 props，我们可以指定父组件传递给子组件的数据的类型、默认值等属性。这里的 parentData 是父组件中的一个数据，通过 v-bind 将其动态绑定到子组件的 propA 上。除了声明 props，我们还可以使用 v-bind 指令来动态绑定 prop 数据。在子组件中可以通过 this.propName 来访问父组件传递的 prop 数据。
react.js 中对props 的理解
weixin_33726318的博客
02-23 347
-----------------开始--------------------- 1. 每个组件都是一个对象； 2.props是对象的一个属性； 3.组件对象可以通过props传递； ----------------代码截图说明------------------------ 01. 代码 //组件01 function FancyBorder(props){ cons...
Vue 中的三种 Props：模板 Props、配置 Props 和 状态 Props
前端开发博客
07-03 2058
Vue 里有个很重要的东西，就是 Props。Props 是用来在 Vue 组件之间传递数据的，就像你把东西从一个盒子搬到另一个盒子一样，从父组件传到子组件。但你知道吗？Props 也有不同的类型，它们的功能可不一样呢！主要有三种类型：模板 Props配置 Props状态 Props（也叫数据 Props）接下来，我们就来详细了解一下这三种 Props，看看它们到底有什么区别，以及在什么情况下应该...
Vuejs组件教程：深入理解props数据传递
"Vuejs组件中的props数据传递是Vue.js框架中实现父子组件通信的关键机制。本文将通过实例代码详细讲解这一概念，并提供了一些注意事项和最佳实践。" Vue.js允许我们创建可重用的组件，这些组件可以通过props接收...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值