定义Vue 组件
什么是组件:组件的出现,就是为了拆分 Vue 实例的代码量,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件;
组件化和模块化的不同:
- 模块化:是从代码逻辑的角度进行划分的;方便代码的分层开发,保证每个功能模块的职能单一;
- 组件化: 是从UI界面的角度进行划分的;前端的组件化,方便UI组件的重用;
全局定义组件的三种方式
<!-- 引用方式 -->
<my-com></my-com>
- 使用 Vue.extend 配合 Vue.component 方法
// 定义
var com = Vue.extend({
template: '<h3>创建了一个H3</h3>' // 通过 template 属性 指定了组件要展示的属性
});
// 使用 Vue.component ('组件的名称', 创建出来的组件模板对象) 如果组件名是驼峰命名引用时需要加 -
Vue.component('myCom', com)
Vue.component('myCom', Vue.extend({ // 缩写
template: '<h3>创建了一个H3</h3>'
}));
- 直接使用 Vue.component 方法
Vue.component('myCom', {
template: '<div><h1>直接使用 component 创建的全局组件</h1><span>123</span></div>'
});
- 使用 Vue 提供的 template 标签 并结合 Vue.component 方法
<!-- 在Vue实例控制的区域之外定义 -->
<template id="temp">
<h1>使用 template 标签, 之后再去 Vue实例中去引用 </h1>
</template>
Vue.component('myCom', {
template: '#temp'
});
注意: 组件中的 DOM 结构, 有且只能有唯一的根元素(Root Element) 来进行包裹
定义私有组件
var vm = new Vue({
el: '#app',
components: {
myCom: {
template: '可以使用模板, 也可以只写表标签,规则与上述一致'
}
}
});
组件中的 data 和 methods
data
// 组件中可以有自己的 data 但是必须是一个方法, 还要 return 一个对象
Vue.component('myCom', {
template: '<h1>调用方式和 Vue 实例一致: {{ msg }}</h1>',
data: function () {
return {
msg: '组件中的data'
}
}
});
methods
Vue.component('myCom', {
template: '<div><intpu type="button" value="+1" @click(increment)><h1>{{ msg }}</h1></div>',
data: function () {
return {msg : 0};
},
methods: {
increment () {
this.msg += 1;
}
}
});
切换组件的两种方式
使用 flag 标识符 结合v-if v-else 指令切换组件
<!-- 页面 -->
<div id="app">
<a href="" @click="flag=true"></a>
<a href="" @click="flag=false"></a>
<login v-if="flag"></login>
<register v-else="flag"><register>
</div>
// Vue 实例 此方法对于数量有一定缺陷
Vue.component('login', {
template: '<h3>假设这是登录的组件</h3>'
});
Vue.component('register', {
template: '<h3>假设这是注册的组件</h3>'
});
var vm = new Vue({
el: '#app',
data: { flag = true }
});
使用 component 标签, 来引用组件, 并通过 :is 属性指定要加载的组件
<!-- 页面 -->
<div id="app">
<a href="" @click.prevent="comName='login'"></a>
<a href="" @click.prevent="comName='register'"></a>
<!-- component 是一个占位符, :is 属性,可以用来指定要展示组件的名称 -->
<component :is="comName"></component>
</div>
Vue.component('login', {
template: '<h3>假设这是登录的组件</h3>'
});
Vue.component('register', {
template: '<h3>假设这是注册的组件</h3>'
});
var vm = new Vue({
el: '#app',
data: { comName: 'login' }
});
组件过渡动画
.v-enter, .v-leave-to {
opacity: 0;
transform: translateX(80px);
}
.v-enter-active, .v-leave-active {
transition: all 0.4s ease;
}
<!-- 只是需要 transition 把 组件包裹起来就可以了 通过mode设置动画模式 -->
<transition mode="out-in">
<component :is="comName"></component>
</transition>
父组件向子组件传递值
<div id="app">
<!-- 1: 先通过 v-bind: 绑定自定义属性 然后指定值 -->
<son v-bind:parentmsg="msg"></son>
</div>
var vm = new Vue({
el: '#app',
data: {
msg: '这是父组件的内容'
},
components:
son: {
// 3: 通过 {{ parentmsg }} 的方式调用父组件中的值
template: '这是子组件的内容 -- {{ parentmsg }}',
},
// 注意: props 是只读的, 虽然可以修改, 但是会报错
props: ['parentmsg'], // 2: 再通过 props 定义父组件传过来的值
});
子组件向父组件传值
- 原理:父组件将方法的引用,传递到子组件内部,子组件在内部调用父组件传递过来的方法,同时把要发给父组件的数据,在调用方法的时候当做参数传递过去;
- 父组件将方法的引用传递给子组件,其中,getMsg 是组件中 methods 中定义的方法名,func 是子组件调用传递过来方法时候的方法名称
<son @func="getMsg"></son>
- 子组件内部通过
this.$emit('方法名', 要传递的数据)
方式, 来调用组件中的方法, 同时把数据传递给父组件使用
<div id="app">
<son @func="getMsg"></son>
</div>
<template id="tmp">
<input type="button" value="点击传递" @click="give">
</template>
var vm = new Vue({
el: '#app',
data: { fromChild: null },
methods: {
getMsg(param) {
this.fromChild = param;
}
},
components: {
son: {
template: '#tmpl',
methods: {
myclick() {
this.$emit('func', this.child);
}
},
data() {
return {
child: { name: 'son'}
};
},
}
}
});
使用 this.$refs 获取元素和组件
<div id="app">
<input type="button" value="获取元素内容" @click="getElement" />
<!-- 使用 ref 获取元素 -->
<h1 ref="myh1"> 这是一个 h1 </h1>
<hr />
<!-- 使用 ref 获取子组件 -->
<my-com ref="mycom"></my-com>
</div>
<script>
Vue.component('my-com', {
template: '<h5>这是一个子组件</h5>',
data() {
return { name: '子组件' }
},
methods: {
show() {
console.log('这是子组件的show方法');
}
}
})
var vm = new Vue({
el: '#app',
data: {},
methods: {
getElement() {
// 通过 this.$refs 来获取元素
console.log(this.$refs.myh1.innerText);
// 通过 this.$refs 来获取组件 data 以及 methods
console.log(this.$refs.mycom);
console.log(this.$refs.mycom.name);
console.log(this.$refs.mycom.show());
}
}
});
</script>