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

时间: 2024-11-05 20:29:51

使用 props 传递数据的相关文章

Vue.js-----轻量高效的MVVM框架(九、组件利用Props传递数据)

#使用props传递数据 html:传递普通的字符串 <h3>#使用props传递数据</h3> <div id="dr01"> <div>组件实例的作用域是孤立的.这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.可以使用 props 把数据传给子组件.</div> <br /> <child msg="hello, vue.js!"></child> <

vue组件-#构成组件-父组件向子组件传递数据

组件对于vue来说非常重要,学习学习了基础vue后,再回过头来把组件弄透! 一.概念 组件意味着协同工作,通常父子组件会是这样的关系:组件 A 在它的模版中使用了组件 B . 它们之间必然需要相互通信:父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件. 在 Vue.js 中,父子组件的关系可以总结为 props down, events up . 父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息. 看看它们是怎么工作的.        

vue组件-子组件向父组件传递数据-自定义事件

自定义事件 我们知道,父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,应该怎样做?那就是自定义事件!

react之传递数据的几种方式props传值、路由传值、状态提升、redux、context

react之传递数据的几种方式 1.父子传值 父传值:<子的标签 value={'aaa'} index={'bbb'}></子的标签> 子接值:<li key={this.props.index}>{this.props.value}</li> 不止可以传值也可以传递方法: 父:方法={this.方法} 子:{this.props.方法.bind(this)} 传来的参数子组件可以使用,此处用{value,index}等解构赋值省去this.props 此

vue.js 组件之间传递数据

组件是 vue.js  最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一.本文就这个知识点和大家一起来扒一扒,希望对大家 学习vue.js有所帮助. 组件 组件与组件之间,还存在着不同的关系.父子关系与兄弟关系(不是父子的都暂称为兄弟吧). 父子组件 父子关系即是组件 A  在它的模板中使用了组件  B ,那么组件  A  就是父组件,组件  B  就是子组件. //  注册一个子组件 Vue.component(

React之使用Context跨组件树传递数据

---------------------------------  讲解一 原文:https://blog.csdn.net/xuxiaoping1989/article/details/78480758 注意: 从 React v15.5 开始 ,React.PropTypes 助手函数已被弃用,我们建议使用 prop-types 库 来定义contextTypes.2.1首先你需要通过在终端npm install prop-types安装一个叫prop-types的第三方包 getChil

(尚043) vue_向路由组件传递数据+vue param和query两种传参方式

效果展示: ============================================================================ 应写成下图这种形式: :id为占位 现在是通过什么路径向路由组件传递数据的? 通过请求参数${message.id}传递的 请求参数有两种: 1).Param 2).Query  (?后面,类似于get) ================================================================

在activity之间通过静态变量传递数据

在activity之间通过静态变量传递数据 一.简介 主要作用:解决intent不能传递非序列化的对象 评价:简单方便,不过intent方式更加简单和方便 二.具体操作 1.在传输数据的页面弄好数据,传递给接收数据的页面 Obj1 obj=new Obj1("fry",22); Activity01.obj=obj; 2.在接收数据的页面显示数据 输出obj即可 3.具体代码 传输数据的页面 Intent intent=new Intent();//初始化intent intent.s

Android第一行代码学习笔记六---Intent向活动传递数据

@1.向下一个活动传递数据: Intent提供了一系列putExtra()方法的重载,可以把我们想要传递的数据暂存在Intent中,启动了另一个活动后,只需把这些数据再从Intent中取出就可以了,比如firstActivity中有一个字符串要传递到secondActivity中,修改firstActivity中按钮点击事件,代码可以这样编写: button.setOnClickListener(new View.OnClickListener() { public void onClick(V