vuejs使用 Props 传递数据

最新推荐文章于 2024-05-17 08:00:00 发布
最新推荐文章于 2024-05-17 08:00:00 发布
阅读量1.6k 收藏
点赞数
分类专栏： Vue/Vux

使用 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;
 
最低0.47元/天 解锁文章
qq_32444825
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue.js初学之组件props
Yvan_Lin的博客
05-24 449
上一篇讲述了公司——办公室——员工的神奇组合，那么现在就要开始来说说，他们中间是怎么发布任务的。vue里面就提供了一个好东西，叫props，这一篇里面，我会把在props里面踩的坑都写出来。说起props，其实就是父组件和子组件传递信息的工具，用我的话讲就是，办公室的老大给员工说，“我要给你什么任务一样”...
Vuejs 组件——props数据传递的实例代码
10-20
本篇文章主要介绍了Vuejs 组件——props数据传递的实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
Vue组件选项props
weixin_34227447的博客
08-18 288
前面的话 　　组件接受的选项大部分与Vue实例一样，而选项props是组件中非常重要的一个选项。在 Vue 中，父子组件的关系可以总结为 props down, events up。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。本文将详细介绍Vue组件选项props   父子级组件 　　在介绍props之前，先介绍父子级组件的写法 　　在一...
详细分析Vue3中的props用法（父传子）
最新发布
码农研究僧的博客
05-17 5136
在 Vue 3 中，父组件可以通过 props 向子组件传递数据 子组件通过 defineProps 或 props 来定义它接收的属性 这些属性在子组件中可以直接使用
Vue.js 组件间值传递(props)
LT19990304的博客
10-09 481
简单接收 子组件配置 <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 5497
父组件通过 props 向下传递数据给子组件；子组件通过 events 给父组件发送消息。
vue.js props选项
虬川候的博客
10-30 244
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...
vuejs父子组件之间数据交互详解
10-19
在 Vue 中，这种交互遵循“props down, events up”原则，即数据由父组件通过 props 下传给子组件，子组件通过 $emit 触发事件来通知父组件并传递数据。 1. **Props down（属性向下）**： - **Props** 是父组件向...
reactjs入门到实战（五）---- props详解
afk46847的博客
06-05 110
1》》》基础的props使用 不可修改父属性 getDefaultProps 对于外界/父组件的属性值，无法直接修改，它是只读的。 <script type="text/babel"> var Hello = React.createClass({ getDefaultProps:functi...
Vue.js中的props
qq_43536788的博客
03-13 463
在 Vue.js 中，props是用于组件间通信的一种机制。它允许父组件向子组件传递数据。子组件通过声明props来定义它期望从父组件接收哪些数据。这些数据可以是任何类型，包括字符串、数字、布尔值、数组、对象甚至是其他 Vue 组件。
Vue的props
qq_50260510的博客
06-07 3361
Vue的props
vue数据传递-----props
syj1127_的博客
04-01 424
对于引用数据Object类型 的person， 子组件收到person后， 修改了 person 中 name的属性值，然后子组件和父组件中的数据同时发生了改变。子组件给父组件传递数据，即 父组件先 定义一个函数，然会将函数传递给子组件。可以发现， 对于基本类型 String 类型的 msg ，子组件收到后修改msg ，仅仅修改了自己的数据，父组件中的msg并没有改变。的数据，子组件收到object数据后，修改object中的属性值，那子组件和父组件中的object数据将会。如果父组件传递给子组件一个。
react.js 中对props 的理解
weixin_33726318的博客
02-23 308
-----------------开始--------------------- 1. 每个组件都是一个对象； 2.props是对象的一个属性； 3.组件对象可以通过props传递； ----------------代码截图说明------------------------ 01. 代码 //组件01 function FancyBorder(props){ cons...
掌财社:如何在 Vue.js 中使用 props
weixin_45378258的博客
08-26 163
我们使用 props 将信息/数据从父组件传递到子组件。在这篇文章中，我将解释你需要知道的关于 props 的一切，以及为什么你应该在 Vue.js 中使用 props。 以下是我们将在本指南中涵盖的内容的简要概述： Vue.js 中的 props 是什么？ 如何在组件内注册 props 如何使用多个props Vue.js 组件类型 如何将数据传递给 props 如何将函数传递给 props 如何验证props 如何为 props 设置默认值 Vue.js 中的 Props 是什么？
vue(五)组件、自定义属性props
m0_51371862的博客
10-08 4201
一、组件化开发 组件化开发指的是：根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目 的开发和维护。 vue 是一个支持组件化开发的前端框架。 vue 中规定：组件的后缀名是 .vue。 App.vue 文件 本质上就是一个 vue 的组件。 二、vue 组件的三个组成部分 每个 .vue 组件都由 3 部分构成，分别是： template -----组件的模板结构 ...
reactjs组件实例的三大属性之props使用示例:在函数式组件中使用props
学亮编程手记
02-27 747
props基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>props基本使用</title> </head> <body> <!-- 准备好一个“容器” --> <div id="test1"></div> <div id="test2"></div
reactjs组件的三大属性之props基本使用及props属性值检验
学亮编程手记
02-07 472
reactjs组件的三大属性之props基本使用及props属性值检验
使用props传递数据
09-19
使用props可以在Vue中实现组件之间的数据传递和解耦，使应用更加灵活和可维护。通过在父组件中定义props属性，并将其传递给子组件，在子组件中可以访问和使用这些props数据。这样，父组件可以向子组件传递数据，子...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值