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);
}
同样的方法获取组件,可通过此引用获取组建的方法和数据。