在Vue.js组件化开发中，父子组件之间的数据传递是最常见的需求。由于组件实例的作用域是孤立的，子组件无法直接访问父组件的数据，必须通过 props 将父组件的数据显式传递给子组件。下面通过实际示例，解析 props 的声明方式、常见错误以及多数据传递时的顺序问题。
## 一、Props 的基本声明与使用
子组件需要在 props 选项中声明期望接收的数据字段，随后便可在模板或组件实例中通过 this.xxx 使用。
- Vue.component('child', {
- // 声明 props
- props: ['msg'],
- // prop 可以用在模板内，也可以通过 this.msg 访问
- template: '<span>{{ msg }}</span>'
- })
父组件像使用普通 HTML 属性一样传递数据：
- <child msg="hello!"></child>
## 二、常见错误：data 与 props 混用导致数据不生效
初学者常在子组件中同时定义 data 和 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>
- <div id="app1">
- <child mssage="hello!"></child>
- </div>
- <script>
- Vue.config.debug = true;
- Vue.component('child', {
- props: ['msg','nihao','nisha'],
- template: '<span>{{ msg }}{{nihao}}{{nisha}}</span>',
- data: function() {
- return {
- mssage: 'boy'
- }
- }
- });
- var vm = new Vue({
- el: '#app1'
- })
- </script>
- </body>
- </html>
该例中 data 返回了 mssage 字段，但 props 中并未包含 mssage，父组件传递的 mssage="hello!" 无法被子组件接收，且 data 中的 mssage 与模板无关，页面最终只显示空串。正确的做法是移除多余的 data，直接通过 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>
- <div id="app1">
- <child mssage="hello!"></child>
- </div>
- <script>
- Vue.config.debug = true;
- Vue.component('child', {
- props: ['msg','nihao','nisha'],
- template: '<span>{{ msg }}{{nihao}}{{nisha}}</span>'
- });
- var vm = new Vue({
- el: '#app1'
- })
- </script>
- </body>
- </html>
注意：props 中的字段名与父组件传递的属性名一致，本例中父组件传递了 mssage，而子组件 props 中无同名项，因此仍然无法显示。实际开发中应保持属性名统一。
## 三、多数据传递时的顺序问题
当使用多个子组件实例，每个实例只传递部分 props 时，模板中的静态内容会重复出现在每个实例的渲染结果中。下面通过四种不同位置的模板布局来观察顺序影响。
首先定义多实例父组件模板：
- <div id="app1">
- <child msg="hello!"></child>
- <child nihao="hello1!"></child>
- <child nisha="hello2!"></child>
- </div>
子组件声明三个 props：msg、nihao、nisha，模板中按不同方式组合。
**第一种：模板仅包含 props 变量**
- template: '<span>{{ msg }}{{nihao}}{{nisha}}</span>'
结果：依次输出 "hello!"、"hello1!"、"hello2!"。每个子组件只显示自身接收到的 prop，未接收的留空。
**第二种：模板最前面添加静态文本“123”**
- template: '<span>123{{ msg }}{{nihao}}{{nisha}}</span>'
结果："123hello!"、"123hello1!"、"123hello2!"。静态文本“123”出现在每个子组件的输出最前面。
**第三种：模板最后面添加静态文本“123”**
- template: '<span>{{ msg }}{{nihao}}{{nisha}}123</span>'
结果："hello!123"、"hello1!123"、"hello2!123"。静态文本“123”出现在每个子组件的最后。
**第四种：模板中间插入静态文本“123”**
- template: '<span>{{ msg }}123{{nihao}}{{nisha}}123</span>'
结果：第一个子组件输出 "hello!123"（msg 后有 123，其余 props 为空，再拼接 123），第二个输出 "123hello1!"（msg 为空，先输出 123，再输出 nihao，最后 123），第三个输出 "123hello2!123"。实际上，由于 msg 和 nihao、nisha 的先后顺序，静态“123”会根据 props 的排列位置插入。
## 四、总结与建议
1. props 是父子组件通信的核心，必须在子组件中显式声明。
2. 避免 props 与 data 字段重名，否则会发生覆盖或冲突。
3. 当多个子组件实例使用不同 props 时，模板中的静态文本会原样复制到每个实例中，应根据实际需求设计模板结构。
4. 推荐始终传递完整的 props 对象，以保证组件复用性。
更多 Vue.js 组件开发技巧可参考官方文档或本专栏的其他教程。 |
发表于 
发表于