关于Vue.js的组件化，使用props传递数据

组件化是Vue.js的重要组成部分。对于一个工程量很大的项目，组件化是重中之重。

刚刚入手Vue，感觉Vue的组件化非常棒。

主要是记录下自己学的过程中遇到的问题与解决。

构成组件：

组件意味着协同工作，通常父子组件会是这样的关系：组件 A 在它的模版中使用了组件 B 。它们之间必然需要相互通信：父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。然而，在一个良好定义的接口中尽可能将父子组件解耦是很重要的。这保证了每个组件可以在相对隔离的环境中书写和理解，也大幅提高了组件的可维护性和可重用性。

在 Vue.js 中，父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。看看它们是怎么工作的。



这是官方文档的教程。

下面举具体的例子。

用props传递数据。

首先你要先创建一个自定义标签。

 

Vue.component('child5', {
// 声明 props
props: ['message'],
// 就像 data 一样，prop 可以用在模板内
// 同样也可以在 vm 实例中像 “this.message” 这样使用
template: '<span>{{ message }}</span>'
})

我建立了一个child5的标签。

props用来传递数据。

template作为一个模板。结果是span标签会替代child5标签。

然后new一个Vue出来。

new Vue({
el:"#app-992",
data:{
message:"haha"
}
})

下面贴到html代码。

<div id="app-992">
<input v-model="message">
<br>
<child5 :message="message"></child5>
</div>

可以看到用v-model与child5标签建立关系。:message是v-bind:message的缩写。

如果看过Vue的同学应该知道。

<input v-model="message">

<child5 :message="message"></child5>

里面的”message“是互相绑定的，也就是说只要他俩一样就行，无所谓你取什么名字，而这两个message指的是new出来的Vue里的message也就是message：“haha”。

可能大家有点晕。我们可以给他解耦一下。假如没有child5这个标签，假如只是一个普通的p标签：

<div id="app-998">
<textarea v-model="message" placeholder="点击我"></textarea>
<p style="white-space: pre">message is:{{message}}</p>
</div>

new Vue({
el:"#app-998",
data:{
message:""
}
})

结构非常清晰，你在textarea里输入什么，下面的p标签就会显示什么。同理，这个message取什么名字，对应的是如上所说的地方。然后就是我们自定义的标签child5，props用来传递数据，传递给

<span>{{ message }}</span>'

所以props里面的message就是这个message，而这个message在html里就是child5里面：message这个了。这个相当于一个小组件，把他整合到div里。其实他与div没半毛钱关系。你可以想象把一个轮播图放到一个div里面。然后唯一有关系的是数据的传递，你结合这句代码：

<child5 :message="message"></child5>

你定义的标签的message的值 是“message”，“message”的值 就是你自己new出来的 Vue里面那个message的值，这样就联系起来了。

自己瞎写瞎总结的，望各位看官手下留情，欢迎批评指正！