1.创建组件
Vue.component(‘login‘,{
template:‘<h1>登录</h1>‘
});
2.组件中展示数据和相应事件,
这样就不难理解data为什么不能是对象了，如果传进来是对象，new出来的两个实例同时引用一个对象，
那么当你修改其中一个属性的时候，另外一个实例也会跟着改
对象是对于内存地址的引用 直接定义个对象的话，组件之间都会使用这个对象，这样会造成组件之间数据相互影响。
Vue.component(‘login‘,{
data(){
return {
msg:‘大家好‘，
input:‘去死吧‘
}
}，
template:‘<h1>注册</h1>‘,
methods:{
login():{
alert(‘点击了登录按钮‘)
}
}
});
3.使用component属性定义局部子组件
组件实例定义方式：
<script>
let vm = new Vue({
el: "#app",
data: {},
methods: {},
components: {
account: {
tempalte:
"<div><h1>这是Account组件{{name}}</h1><login></login></div>",
components: {
login: {
tempalte: "<h3>这是登录组件</h3>"
}
}
}
}
});
</script>
引用组件
<div id="app"><account></account></div>
4.v-if和v-else切换组件
<div id="app">
<input @click="flag=!flag"></input>
<my-com1 v-if="flag"></my-com1>
<my-com2 v-else="flag"></my-com2>
</div>
<script>
Vue.component("my-com1",
{tempalte:‘ss‘})
Vue.components("my-com2"{
tempalte:‘dd‘
})
</script>
5.使用component 标签，来引用组件，并通过：is属性来指定要加载的组件；
<div id="app">
<a href="#" @click.prevent="comName=‘login‘">登录</a>
<a href="#" @click.prevent="comNmae=‘login‘">注册</a>
<transition>
<component :is="comName"></component>
</div>
6.父传子:比较简单通过props 就可以了（微信小程序一模一样）
<script>
components:{
son:{
props:[‘finfo‘],
tempalte:‘‘
}
}
</script>
7.子传父：（微信小程序一模一样,逻辑一模一样。只是写法有一点区别而已）这里是通过thi.$emit(‘方法名‘,‘传递的数据‘)
<div id=‘app‘>
<son @func="getMsg"></son>
<script type="x-template" id="son">
<div>
<input type="button" value="向父组件传值" @click="sendMsg" />
</div>
</script>
</div>
<script>
Vue.component(‘son‘,{
tempalte:‘#son‘,
methods:{
sendMsg(){
this.$emit(‘func‘,‘ok‘);
}
}
})
let vm = new Vue({
el:‘#app‘,
data:{
},
methods:{
getMsg:function(val){
console.log(val)
}
}
})
</script>
