定义
什么是组件:组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可;
组件化和模块化的不同:
- 模块化: 是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一;
- 组件化: 是从UI界面的角度进行划分的;前端的组件化,方便UI组件的重用;
全局组件定义的三种方式
- 使用 Vue.extend 配合 Vue.component 方法:
var login = Vue.extend({
template: '<h1>登录</h1>'
});
Vue.component('login', login);
- 直接使用 Vue.component 方法:
Vue.component('register', {
template: '<h1>注册</h1>'
});
- 将模板字符串,定义到script标签种:
<script id="tmpl" type="x-template">
<div><a href="#">登录</a> | <a href="#">注册</a></div>
</script>
同时,需要使用 Vue.component 来定义组件:
Vue.component('account', {
template: '#tmpl'
});
注意: 组件中的DOM结构,有且只能有唯一的根元素(Root Element)来进行包裹!还有全局组件是所有示例有用,切记是实例!
定义私有组件:
- vue实例中这样:
components: { // 定义实例内部私有组件的
login: {
template: '#tmpl2'
}
},
- 外部描述:
<template id="tmpl2">
<h1>这是私有的 login 组件</h1>
</template>
- 再外部调用:
<div id="app2">
<mycom3></mycom3>
<login></login>
</div>
组件中定义data
组件中如果定义data的话,有严格格式,data:function(){ return {} }。
不能返回一个外部定义的对象,虽然不报错,但如果在body中有多个同样组件,会指向这同一个对象。
data: function () {
// return dataObj
return { count: 0 }
},
组件切换
- 两个组件之间的话,可以使用v-if和v-else来
<a href="" @click.prevent="flag=true">登录</a>
<a href="" @click.prevent="flag=false">注册</a>
<login v-if="flag"></login>
<register v-else="flag"></register>
- 多个组件之间的话
- 定义一个component:
component 是一个占位符, :is 属性,可以用来指定要 展示的组件的名称 <component :is="comName"></component>
- 再修改(前提在vue实例data中定义了一个conName空变量)
<a href="" @click.prevent="comName='login'">登录</a> <a href="" @click.prevent="comName='register'">注册</a>
- 定义一个component:
父组件向子组件传数据
- 先绑定属性
<com1 v-bind:parentmsg="msg"></com1>
- 定义props
props: ['parentmsg'], // 把父组件传递过来的 parentmsg 属性,先在 props 数组中,定义一下,这样,才能使用这个数据
Vue中获取DOM元素
- 在要获取的元素定义一个ref
<h3 ref="myh3">哈哈哈, 今天天气太好了!!!</h3>
- 显示这个元素的内容
this.$refs.myh3.innerText