Vue组件
什么是组件：组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。
组件化与模块化
模块化：从代码逻辑的角度进行划分
组件化：从UI界面的角度进行划分
创建全局组件
1vue extend
1.1先创建模板
var comlname= Vue.extend({
template:'<h3>这是使用Vue.extend创建的组件</h3>'
})
comlname为模板名，template表示模板html结构
1.2再创建组件
Vue.component("myComl",comlname);
myComl为组件名，coml表示之前创建的模板名
可简写为
Vue.component("myComl",Vue.extend({
template:'<h3>这是使用Vue.extend创建的组件</h3>'
}));
还可以更简单
Vue.component("myComl",{
template:'<h3>这是使用Vue.extend创建的组件</h3>'
});
模板还可以创建在html中，用id取得
<template id="test">
<h3>这是使用Vue.extend创建的组件</h3>
</template>
Vue.component("myComl",{
template:'#test'
});
注意：
- 模板只能有一个根元素
- 要引用组件，直接把组件的名称，以HTML标签的形式，引入到页面中
先new Vue({el:’#myComl’}) ;
再
<div id="myComl"> <my-coml></my-coml> </div>
- 使用Vue.component时若组件名称为驼峰命名,例如myComl,引用时应写为my-coml
render渲染
var login = {
template:'<h1>这是测试组件</h1>'
}
var vm = new Vue({
el:"#app",
data:{},
methods:{},
render:function(createElements){
//createElements是一个方法,调用它,能够把指定的模板组件渲染为html结构
return createElements(login);
//return结果会替换整个容器
}});
结果是整个ID为app的div被login组件替换。
创建私有组件
new Vue({
el:"#app",
data:{},
methods:{},
components: {
comlname:{
template:"<h3>这是私有组件</h3>"，
data:function(){
return {
msg:"组建的数据"
} }
}
}
})
-
组件可以有自己的data数据
-
不同于实例中的data，组件中的data必须是一个方法
(为了组件多次调用时数据独立，防止串了) -
组件中的data除了必须成为一个方法外，这个方法内部，还必须返回一个对象（必须是｛｝新建的对象，不能是变量），组件中可以引用返回对象中的信息，例如
template:"<h3>这是私有组件{{msg}}</h3>",
组件切换
使用v-if和v-else配合
<div id="divApp">
<div v-if="type === 'A'" v-cloak>
A
</div>
<div v-else-if="type === 'B'" v-cloak>
B
</div>
<div v-else-if="type === 'C'" v-cloak>
C
</div>
<div v-else v-cloak>
Not A/B/C
</div>
</div>
如此type的值不同显示的div也不同
**使用component（html）元素**
component是一个占位符，:is属性可以用来指定要展现的组件名称
<component :is="thename">
</component>
可以通过设:is值为变量来实现组件切换效果
组件间传值
父组件向子组件传值
子组件中,默认无法访问到父组件中的data上的数据和methods中的方法
父组件可以在引用子组件的时候通过属性绑定v-bind:的形式，把需要传递给子组件的数据，以属性绑定的形式（绑到自己的引用标签身上），传到子组件内部
<coml :parentmsg="msg"></coml>
把父组件传递过来的parentmsg属性,先在prop是数组中定义一下这样才能使用数据(所有props数组中的数据，都是父组件传给子组件的)props里的数据不应该被修改,修改能成功,但会报错
coml: {
template:"<h3>这是子组件---{{parentmsg}} </h3>",
props:['parentmsg']
}
父组件向子组件传方法
先绑定，将show方法以func的名字绑定给组件
<coml @func="show"></coml>
在组件的方法中调用func方法 this.$emit(‘函数名’,参数);（可以用参数顺便逆向传递数据，这是因为子组件通过调用上述方法出发了父组件中的函数，函数仍作为父组件的方法运行，借此可利用参数给父组件数据赋值达到传值效果）。
methods:{
sshow(){
this.$emit('func',"肌肉");
}
}
再将sshow方法绑定给组件自己的元素就可以了
用ref方法获取元素和引用组件
获取元素
实例
<h3 ref="myh3" @click="getElement">你好</h3>
getElement(){
console.log(this.$refs.myh3.innerText);
}
先将元素用ref绑定，再引用
组件
<coml ref="myh3" @click="getElement">你好</coml>
getComponent(){
console.log(this.$refs.myh3);
}
同样的方法获取组件，可通过此引用获取组建的方法和数据。