Vue中Props数据传递与多参数顺序详解
本文详细解析Vue中Props属性的使用方法，通过实例展示如何从父组件向子组件传递数据。重点探讨当props传入多个数据时，HTML模板中不同位置添加字符对子组件渲染结果的影响，并通过四种具体案例说明前后缀及中间插入字符的渲染差异，帮助开发者准确掌握组件间数据交互规则。
Vue Props属性概述
本文旨在深入解析Vue框架中Props属性的具体应用，为读者提供清晰的技术参考。
Props数据传递机制
利用Props进行数据传递
组件实例的作用域具有独立性，这意味着在子组件的模板中无法直接引用父组件的数据。为了实现数据共享，可以通过props将数据传递给子组件。
“prop”代表从父组件向下传递的组件数据字段。子组件必须通过props选项显式声明这些prop，以便接收数据。
Vue.component('child', {
// 声明 props
props: ['msg'],
// prop 可以用在模板内
// 可以用 `this.msg` 设置
template: '<span>{{ msg }}</span>'
})
接下来，我们向子组件传入一个普通的字符串值。
<child msg="hello!"></child>
Props多参数传递顺序示例
具体示例
错误的写法示例：
<!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>
正确的写法示例：
<!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代码
<div id="app1">
<child msg="hello!"></child>
<child nihao="hello1!"></child>
<child nisha="hello2!"></child>
</div>
JS代码
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代码
<div id="app1">
<child msg="hello!"></child>
<child nihao="hello1!"></child>
<child nisha="hello2!"></child>
</div>
JS代码
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代码
<div id="app1">
<child msg="hello!"></child>
<child nihao="hello1!"></child>
<child nisha="hello2!"></child>
</div>
JS代码
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代码
<div id="app1">
<child msg="hello!"></child>
<child nihao="hello1!"></child>
<child nisha="hello2!"></child>
</div>
JS代码
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 是什么：渐进式 JavaScript 框架的核心优势与适用场景
2026-11-03 20:00:13
为什么JS代码执行了但页面没有跳转
2026-11-03 16:29:09
Vue.js 项目中 Axios 拦截器封装与接口对接实战
2026-11-02 10:22:43
前端PC端自适应开发：两种常见适配方案解析
2026-11-01 03:30:54
Vue3中通过JS全局调用弹窗组件的实现方案
2026-10-31 21:34:31