Vue：组件开发
组件化思想：标准，分治，重用，组合
目录：组件注册 > 组件调试工具 > 组件间数据交互 > 组件插槽
组件注册
1、基础：定义全局组件 Vue.component('MyComponentName', { /* ... */ })
案例： 字符串模板 template
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
<!-- 引入element样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<!--
将自定义组件放在这里边，相当于vue的子组件
组件可以重复使用，每个组件之间的数据相互不影响。
-->
<button-counter></button-counter>
<button-counter></button-counter>
</div>
</body>
<script type="text/javascript" src="vue.js"></script>
<!-- 引入组件库,注意顺序，vue先引入 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" >
//全局组件
Vue.component('button-counter',{
data:function(){
return{
count:0
}
},
template:'<button @click="count++" >点击了{{count}}</button>',
methods:{
handle:function(){
//在这里也可以定义方法
}
}
});
//vue的实例也是一个组件
var vm = new Vue({
el: '#app',
data:{
flag: false,
submitFlag : false,
id: '',
name: '',
books:[]
},
methods:{
},
});
</script>
</html>
2、注意事项：
2-1、组件里边的 data必须是一个函数
3-3、组件模板内容可以是模板字符串： 使用反向的点，ESC下边的按键
template:` <div> <button @click="count++" >点击了{{count}}</button> <button>测试</button> </div> `,
3、组件的命名
短横线：Vue.component('my-component-name', { /* ... */ })
驼峰命名：Vue.component('MyComponentName', { /* ... */ })
使用注意事项：
使用驼峰式命名的组件，只能在字符串模板（另一个组件里使用）里使用 驼峰式命名的方式，
在vue实例的模板里（<div id="app"></div>）使用，只需要将对应的驼峰式命名，改为对应的短横线名称即可，组件的驼峰式命名仍可保留
4、注册局部组件：
通过一个普通的 JavaScript 对象来定义组件：
var ComponentA = { /* ... */ } var ComponentB = { /* ... */ } var ComponentC = { /* ... */ }
在父组件（vue实例）里定义：
new Vue({ el: '#app', components: { 'component-a': ComponentA, 'component-b': ComponentB } })
使用： <component-a> </component-a>
注意：局部组件只能在注册它的父组件里使用 ，（即 <div id="app"></div> 里边，因为是在 vue 实例里边定义的组件）
5、组件间数据交互：
5-1、父组件向子组件传值：
子组件通过 props接受传递过来的值： 定义props:['title'],
Vue.component('menu-item',{
props:['title'],
template:'<div><span>{{title}}</span></div>'
});
父组件通过 属性 将值传递给子组件
<div id="app">
<!--
-->
<menu-item title='来着父组件的值' ></menu-item>
<menu-item :title='title'></menu-item>
</div>
5-2、props数据类型： 字符串String，数值Number，布尔Boolean，数值Array，对象Object 。 使用 :name="" ，要有冒号，不然会被当做字符串。
5-3、子组件向父组件传值：
原则：单向数据流，虽然子组件可以直接操作父组件的数值，但并不推荐这样做。
应该这样做：子组件自定义一个事件，父组件监控这个事件
子组件定义一个事件：template:`<div> <button v-on:click="$emit('enlarge-text')">变大字体</button> </div>`
父组件监控：<menu-item @enlarge-text='handel'></menu-item>
那么如何传一个值？
子组件点击事件的 第二个参数
父组件使用 $event 接收：
mounted:function(){ //在这里注册事件 hub.$on('rick-wooo',(val)=>{ this.num += val; }); }
兄弟组件调用：hub.$emit()
methods:{ //在这里调用兄弟组件的方法，进行传值 handle :function(){ hub.$emit('rick-wooo',3); } },
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<div id="app">
<!--
-->
<test-rick></test-rick>
<test-morty></test-morty>
</div>
</body>
<script type="text/javascript" src="vue.js"></script>
<!-- 引入组件库,注意顺序，vue先引入 -->
<script src="https://cdn.bootcss.com/element-ui/2.13.0/index.js"></script>
<script type="text/javascript" >
//1、事件中心
var hub = new Vue();
//2、两个兄弟组件
Vue.component('test-rick',{
data:function(){
return {
num : 0
}
},
template:`
<div>
<div>rick {{num}}</div>
<button v-on:click="handle">rick</button>
</div>`,
methods:{
//在这里调用兄弟组件的方法，进行传值
handle :function(){
hub.$emit('morty-wooo',2)
}
},
mounted:function(){
//在这里注册事件
hub.$on('rick-wooo',(val)=>{
this.num += val;
});
}
});
Vue.component('test-morty',{
data:function(){
return {
num : 0
};
},
template:`
<div>
<div>rick {{num}}</div>
<button v-on:click="handle">rick</button>
</div>`,
methods:{
//在这里调用兄弟组件的方法，进行传值
handle :function(){
hub.$emit('rick-wooo',3);
}
},
mounted:function(){
//在这里注册事件
hub.$on('morty-wooo',(val)=>{
this.num += val;
});
}
});
//vue的实例也是一个组件
var vm = new Vue({
el: '#app',
data:{
},
methods:{
handel:function(val){
this.fontSize = this.fontSize+val;
}
},
});
</script>
</html>
6、组件插槽 : 组件模板里边添加 <slot></slot> 插槽
使用组件时，内容会填充到插槽里边
。
