1.创建组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建组件</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!--
需求：创建一个组件，显示"这是一个组件"。
思路：调用Vue.extend方法和Vue.component方法。
步骤： 1.在html创建一个<my-component/>组件。
2.调用Vue.extend(),将要显示的元素模板赋给template属性，并将整个方法赋给myComponent。
3.调用Vue.component(),将my-component与myComponent关联。
4.创建一个Vue的实例。
-->
<div id="demo">
<!--html组件的命名必须是字母小写，每个单词用-分割进行语义区分，如list-head-component,这是为了与react区别。-->
<my-component></my-component>
</div>
<script>
var myComponent=Vue.extend({
template:"<div>这是一个组件</div>"
});
Vue.component("my-component",myComponent);//这里注意将my-component用引号引起来。
new Vue({
el:"#demo"
})
</script>
</body>
</html>
2.创建组件简写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建组件简写</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!--
需求：创建一个简写的组件。
思路：将Vue.extend方法省略，在Vue.component的第二个参数上用一个对象代替Vue.extend方法。
-->
<div id="demo">
<my-component></my-component>
</div>
<script>
Vue.component("my-component",{
template:"<div>这是一个简写组件</div>"
});
new Vue({
el:'#demo'
})
</script>
</body>
</html>
3.创建复合组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建复合组件</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!--
需求：创建一个复合组件，在父组件中显示"我有一个子组件"，在子组件中显示"我是子组件"。
思路：创建一个子组件和一个父组件，在父组件的components属性中进行子组件的关联，然后在data属性中设置显示"我有一个子组件"。
-->
<div id="demo">
<parent-component></parent-component>
</div>
<script>
//创建一个子组件
var Child=Vue.component("child-component",{
template:"<div>我是子组件</div>"
});
//创建一个父组件
Vue.component("parent-component",{
template:"<div>{{message}}<child-component></child-component></div>", //注意元素模板只能有一个最上层元素，也就是用一个div包裹整个模板。
components:{"child-component":Child},//进行子组件关联，注意child-component需要引号。
data:function(){//组件中的data是一个函数
return {
message:"我有一个子组件"
}
}
})
//创建一个vue的实例
new Vue({
el:"#demo"
})
</script>
</body>
</html>
4.创建动态组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建动态组件</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!--
需求：创建一个最简单的动态组件,点击按钮切换组件。
思路：用vue的特定的<component></component>元素，动态的绑定is属性，使得多个组件在同一挂载点，实现某一组件的显示或隐藏等等,keep-alive用于缓存，防止多次渲染。
-->
<div id="demo">
<!--keep-alive 有俩种属性：include(缓存匹配)，exclude(不缓存匹配的)-->
<keep-alive include="First,Second,Third">
<!--注意动态组件必须是component，这是固定的-->
<component v-bind:is="options"></component>
</keep-alive>
<button id="btn" v-on:click="toggle()">切换组件</button>
</div>
<script>
var vm=new Vue({
el:'#demo',
data:{
options:"First"//options绑定到is特性
},
components:{//建立三个组件分别是First,Second,Third
First:{
template:"<div>first</div>"
},
Second:{
template:"<div>second</div>"
},
Third:{
template:"<div>third</div>"
}
},
methods:{
toggle:function(){
var arr = ["First","Second","Third"];
var index = arr.indexOf(this.options);
this.options = index<2?arr[index+1]:arr[0];
console.log(this.$children);//这里显示缓存的值。
}
}
})
console.log(vm.$children);
</script> </body>
</html>
5.创建复合组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建复合组件</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!--
需求：创建一个复合组件，在父组件中显示"我有一个子组件"，在子组件中显示"我是子组件"。
思路：创建一个子组件和一个父组件，在父组件的components属性中进行子组件的关联，然后在data属性中设置显示"我有一个子组件"。
-->
<div id="demo">
<parent-component></parent-component>
</div>
<script>
//创建一个子组件
var Child=Vue.component("child-component",{
template:"<div>我是子组件</div>"
});
//创建一个父组件
Vue.component("parent-component",{
template:"<div>{{message}}<child-component></child-component></div>", //注意元素模板只能有一个最上层元素，也就是用一个div包裹整个模板。
components:{"child-component":Child},//进行子组件关联，注意child-component需要引号。
data:function(){//组件中的data是一个函数
return {
message:"我有一个子组件"
}
}
})
//创建一个vue的实例
new Vue({
el:"#demo"
})
</script>
</body>
</html>
6.创建父传子通信组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建父传子通信组件</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!--
需求：创建一个父组件向子组件通信的复合组件，传递的属性可以再vue实例来动态改变的,比如我们在vm的data中传一个"我是子组件"，然后传给父组件参数，最后在子组件中显示出来。
思路：1.通过让子组件的props和父组件的props实现连通来达到目的。
-->
<div id="demo">
<!-- 当组件接受来自vm的动态数据时，需要用v-bind-->
<parent-component v-bind:parent_props = "vmData"></parent-component>
</div>
<script>
// 创建一个子组件
var Child = Vue.component("child-component",{
template:"<div>{{child_props}}</div>",
props:["child_props"]//子组件props,很奇怪props的属性值不可以用驼峰式，也不能有-，所以我只能用_来将单词分开╮(╯▽╰)╭
})
// 创建一个父组件
Vue.component("parent-component",{
template:"<div>{{msg}}<child-component v-bind:child_props ='parent_props'></child-component></div>",//v-bind:child_props="parent_props"是实现父子props连通的关键。
props:["parent_props"],//父组件props属性，它是一个数组。
components:{//将子组件添加到父组件
"child-component":Child
},
data:function(){
return {
msg:"我是打酱油的"//不想让父组件直接包裹子组件，所以才加上的附加品。
}
}
})
//创建一个vue实例
new Vue({
el:'#demo',
data:{
vmData:"我是子组件"
}
})
</script>
</body>
</html>
7.创建子传父通信组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建子传父复合组件</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="div">
<parent-component></parent-component>
</div>
<script>
/*
* 需求：点击一个按钮，然后在按钮下面的显示点击次数，
* 思路：按钮为子组件，显示次数为父组件，在子组件的methods中加入clickEvent方法，在方法中书写emit来进行子组件和父组件的关联，通常子传父都是通过事件来触发。
* 步骤：1.创建一个子组件，子组件中有一个按钮，在按钮添加一个点击事件调用方法clickEvent，在方法内写this.$emit("clickEvent")，在html中子组件的属性childPropKey=""childPropValue。
* 2.创建一个父组件，父组件有一个插值{{num}},在父组件的methods中加入方法parentMethods.
* 3.创建mv实例
*
* */
var Child=Vue.component("child-component",{
template:"<input type='button' v-on:click='clickEvent' value='子组件的按钮'>",
methods:{
clickEvent:function(){
this.$emit("clickEvent");//这里是实现子传父的关键。
}
}
})
Vue.component("parent-component",{
template:"<div>父组件的数字:{{num}}<br><child-component v-on:clickEvent='parentMethods'></child-component></div>",
data:function(){
return {num:0}
},
methods:{
parentMethods:function(){
this.num++;
}
},
components:{"child-component":Child}
})
new Vue({
el:'#div'
})
</script>
</body>
</html>
8 非父子组件通信
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建同级组件通信的复合组件</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!--
需求：创建实现非父子组件的兄弟组件,a组件都是按钮，b组件显示数字，当点击a组件时b组件数字增加。
思路： 1.创建一个空的Vue实例作为*事件总线。 var bus = new Vue();
2. 触发a组件的事件 bus.$emit("addNum")；
3.在组件b创建的钩子中监听事件 bus.$on("addNum",funciton(id){//...})
-->
<div id="demo">
<a-component></a-component>
<b-component></b-component>
</div>
<script>
// 创建一个空的Vue实例作为*事件总线。
var bus = new Vue();
//创建组件a
Vue.component("a-component",{
template:"<div><button v-on:click='addNum()'>增加</button></div>",
methods:{
addNum:function(){//触发a组件的事件
bus.$emit("addNum");
}
}
})
// 创建组件b
Vue.component("b-component",{
template:"<div>{{num}}</div>",
data:function(){
return {
num:0
}
},
mounted:function(){//在组件b创建的钩子中监听事件
var _this = this;//引用this就会变成子方法控制的对象，如果需要上级的对像，在没有参数的情况下，前面前提做了一个临时变量_this，可以保存上级对像，子方法中就可以用_this来调用了
bus.$on("addNum",function(){
_this.num++;
})
}
})
//创建vue实例
new Vue({
el:"#demo"
})
</script>
</body>
</html>