vuejs使用 Props 传递数据
来源:互联网 发布:摄影网络教学 编辑:程序博客网 时间:2024/06/13 08:06
使用 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组件学习教程进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
阅读全文
0 0
- vuejs使用 Props 传递数据
- vue.js使用props传递数据
- Vue2.0使用props传递数据---3
- Vue2.0使用props传递数据---4
- Vue2.0使用props传递数据---5
- Vue2.0使用props传递数据---6
- Vuejs——(9)组件——props数据传递
- Vuejs——(9)组件——props数据传递
- Vuejs使用 Prop 动态传递数据
- props数据传递
- react数据传递----props
- 关于Vue.js的组件化,使用props传递数据
- 饿了么项目---6、使用Props传递数据
- Vue2.0使用props传递数据【data篇】
- Vue2.0使用props传递数据【methods篇】
- 续-React数据传递-props
- React.js refs 和props传递数据
- Vue.js学习笔记:props传递数据
- 基于vuejs菜单实现
- Android中的数据库应用小结
- Java Class.forName()
- Java 进程的退出机制与Shutdown hook
- JAVA-反射机制(3)-IoC(控制反转)原理
- vuejs使用 Props 传递数据
- 简单理解vue中Props属性_javascript技巧
- 浅析如何利用JavaScript进行语音识别_javascript技巧
- Java微信公众平台开发之获取地理位置
- 2017.08.21工作日记
- thinkphp5的nestedsets无限极分类扩展包使用
- Ubuntu源码编译clang
- 二叉树中找出和为某一值的所有路径
- java String类注意的