目录：
组件：
构成组件：
-----------------
组件：
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。
demo:
<h2>vue-component</h2>
<hr>
<div id="container">
<h3>爱吃什么水果？ app 实例</h3>
<ol>
<todolist
></todolist>
</ol>
</div>
<div id="container2">
<h3>爱吃什么水果？ app2 实例</h3>
<ol>
<todolist
></todolist>
</ol>
</div>
<div>
<h3>爱吃什么水果？</h3>
组件没有在任何实例中，所以不显示 <font color="red">「组件一定要挂载到某个 Vue 实例中，否则不会生效」</font>
<ol>
<todolist
></todolist>
</ol>
</div>
<script type="text/javascript">
// 定义一个子组件
var child = Vue.extend({
template: '<div>嵌套在 todolist 组件中</div>',
})
// 定义一个组件构造器，不是实例
var todolist = Vue.extend({
template:'<div><li v-for="(item,index) in datas" @click="showName(index)">{{item.text}}</li> <br/><child></child></div>',
data() {
return {
datas:[
{ id: 0, text: '苹果' },
{ id: 1, text: '香蕉' },
{ id: 2, text: '只要是水果我都爱吃' }
]
}
},
methods:{
showName(index){
alert(this.datas[index].text)
}
},
components: {
'child': child
}
})
// 全局组件注册
// Vue.component('todolist',todolist)
// 定义一个 Vue 实例
var app = new Vue({
el:"#container",
data:{},
components: {
'todolist': todolist
}
})
// 定义另一个 Vue 实例
var app2 = new Vue({
el:'#container2'
})
</script>组件意味着协同工作，通常父子组件会是这样的关系：组件 A 在它的模版中使用了组件 B 。它们之间必然需要相互通信：父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。然而，在一个良好定义的接口中尽可能将父子组件解耦是很重要的。这保证了每个组件可以在相对隔离的环境中书写和理解，也大幅提高了组件的可维护性和可重用性。
在 Vue.js 中，父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。看看它们是怎么工作的。
字面量语法 vs 动态语法
初学者常犯的一个错误是使用字面量语法传递数值：
<!-- 传递了一个字符串"1" -->
<comp some-prop="1"></comp>因为它是一个字面 prop ，它的值以字符串 "1" 而不是以实际的数字传下去。如果想传递一个实际的 JavaScript 数字，需要使用 v-bind ，从而让它的值被当作 JavaScript 表达式计算：
动态 Props
类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件:
demo:
<h4>以下是 props 例子</h4>
props 传递方法，回调的时候，把 message「你好」 传递回来「使用 props 中的 message 作为子组件的 data」
<hr>
<div id="app2">
<!-- 如果要使用 props 来传递对象，就要使用 v-bind -->
<!-- 注意：在这里 age 在 props 中规定了要传入数字类型，这里传入 String 是为了演示效果，正式中使用要按照 age=100 来传入 -->
<mycomponent
message="你好"
:mydata="{username:'tigerchain',age:28}"
name-style="color:red"
age="100"
:clickme="show"
/>
</div>
<script>
// 定义一个样式
var imgStyle = {
height: '40px',
width: '40px'
}
var vm = new Vue({
el: '#container',
data: {
msg:"123",
imgStyle:imgStyle,
imgSrc:'./imgs/logo.png',
show:true,
clickBtnText:'',
isDivStyle:true
}
})
// 定义一个组件
var myComponent = Vue.extend({
// 定义 props 就是一些默认值
props: {
message:"",
mydata:{},
//样式 ，如果这里使用驼峰标识 ，则在标签中使用就要使用 name-style 传递
nameStyle:{},
// 这里规定传递过来的数据必须是数字，否则后台会报警告
age: Number,
clickme:{
type:Function
}
},
data(){
return {
// 可以在数据里面将 props 值赋给 data 值，然后就可以修改这个值，但是原始的 props 中的值是修改不了的
msg:this.message
}
},
template: '<div>'+
'{{ message }}--{{msg}}'+
'<div>'+
'<span v-bind:style="nameStyle" @click="clickme()">{{ mydata.username}} {{this.age}}</span>'+
'<button @click="clickme(msg)">点击我</button>'+
'</div>'+
' </div>'
})
