|
什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。
组件化和模块化的不同：
? ?模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一
? ?组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用
全局组件定义的四种方式
1.使用 Vue.extend 配合 Vue.component 方法：
var login = Vue.extend({
? ? template: '<h1>登录</h1>'
? });
? Vue.component('login', login);
2.直接使用 Vue.component 方法：
Vue.component('register', {
? ? template: '<h1>注册</h1>'
? });
3.将模板字符串，定义到script标签中：
<script id="tmpl" type="x-template">
? ? <div><a href="#">登录</a> | <a href="#">注册</a></div>
? </script>
同时，需要使用 Vue.component 来定义组件：
Vue.component('account', {
? ? template: '#tmpl'
? });
4.将模板字符串，定义到template标签中：
< template id="tmpl">
? ? <div><a href="#">登录</a> | <a href="#">注册</a></div>
? </ template >
同时，需要使用 Vue.component 来定义组件：
Vue.component('account', {
? ? template: '#tmpl'
? });
前三个基本不用，主要记住第四个
?组件中展示数据和响应事件
在组件中，data需要被定义为一个方法，例如：
Vue.component('account', {
? ? template: '#tmpl',
? ? data() {
? ? ? return {
? ? ? ? msg: '大家好！'
? ? ? }
? ? },
? ? methods:{
? ? ? login(){
? ? ? ? alert('点击了登录按钮');
? ? ? }
? ? }
? });
使用components属性定义局部子组件
组件实例定义方式：
<script>
? // 创建 Vue 实例，得到 ViewModel
? var vm = new Vue({
? ? el: '#app',
? ? data: {},
? ? methods: {},
? ? components: { // 定义子组件
? ? ? account: { // account 组件
? ? ? ? template: '<div><h1>这是Account组件{{name}}</h1><login></login></div>', // 在这里使用定义的子组件
? ? ? ? components: { // 定义子组件的子组件
? ? ? ? ? login: { // login 组件
? ? ? ? ? ? template: "<h3>这是登录组件</h3>"
? ? ? ? ? }
? ? ? ? }
? ? ? }
? ? }
? });
</script>
引用组件：
<div id="app">
?<account></account>
</div>
在子组件中，如果将模板字符串，定义到了script标签中，那么，要访问子组件身上的data属性中的值，需要使用this来访问；
【重点】为什么组件中的data属性必须定义为一个方法并返回一个对象
?组件案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id='app'>
<!-- 组件名 不能和html5标签重复 不能使用内置或保留的html5元素作为组件id -->
<login></login>
<!-- 无法使用他人的私有组件 -->
<!-- <mytop></mytop> -->
</div>
<!-- 创建组件方法 -->
<template id="login">
<!-- 只能有一个根元素 -->
<div>
<h3>第一军团没有秘密</h3>
<h3>西吉斯蒙德</h3>
</div>
</template>
<!-- 以下为私有组件 -->
<div id="app2">
<login></login>
<mytop></mytop>
</div>
<template id="myheader">
<!-- 只能有一个根元素 -->
<div>
<h3>黄金王座</h3>
<h3>西吉斯蒙德</h3>
</div>
</template>
<script>
Vue.component('login',{
template:'#login'
})
const vm = new Vue({
el: '#app',
data: {
},
methods: {
},
beforeCreate(){
},
created(){
},
beforeMount(){
},
mounted(){
},
beforeUpdate(){
},
updated(){
},
})
// 私有租组件
const vm2 = new Vue({
el: '#app2',
data: {
},
methods: {
},
components:{
'mytop':{
template:'#myheader'
}
},
beforeCreate() {
},
created() {
},
beforeMount() {
},
mounted() {
},
beforeUpdate() {
},
updated() {
},
})
</script>
</body>
</html>
组件动画案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.v-enter,
.v-leave-to {
transform: translateX(200px);
}
.v-enter-active,
.v-leave-active {
transition: all 1s;
}
.v-enter-to,
.v-leave {
transform: translateX(0px);
}
</style>
</head>
<body>
<div id='app'>
<logining></logining>
<button @click="flag = !flag"> 切换</button>
<!-- <transition mode="in-out"> -->
<transition mode="out-in">
<component :is="flag?'logining':'mine'"></component>
</transition>
</div>
<div id='app2'>
<logining></logining>
<button @click="flag = !flag"> 切换</button>
<!-- <transition mode="in-out"> -->
<transition mode="out-in">
<logining v-if="flag"></logining>
<mine v-else></mine>
</transition>
</div>
<template id="login">
<div>
太阳
<button @click="add()">加</button>
{{msg}}{{num}}
</div>
</template>
<template id="mine">
<div>
书
<button @click="add2()">加</button>
{{msg}}{{num}}
</div>
</template>
<script>
// 定义组件
Vue.component('logining', {
template: '#login',
data() {
return {
msg: '?',
num: '',
msg2: '📕'
}
},
methods: {
add() {
this.num += this.msg.repeat(10)
},
add2() {
this.num += this.msg2
}
},
beforeCreate() {
console.log('beforeCreate');
},
created() {
console.log('created');
},
beforeDestroy() {
console.log('beforeDestroy');
},
destroyed() {
console.log('destroyed');
},
})
const vm = new Vue({
el: '#app',
data: {
flag: true,
},
methods: {
},
components: {
'mine': {
template: '#mine',
data() {
return {
msg: '?',
num: '',
msg2: '📕'
}
},
methods: {
add() {
this.num += this.msg
},
add2() {
this.num += this.msg2
}
},
}
}
})
const vm2 = new Vue({
el: '#app2',
data: {
flag: true,
},
methods: {
},
components: {
'mine': {
template: '#mine',
data() {
return {
msg: '?',
num: '',
msg2: '📕'
}
},
methods: {
add() {
this.num += this.msg
},
add2() {
this.num += this.msg2
}
},
}
}
})
</script>
</body>
</html>
组件显示数据和方法案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id='app'>
<logining></logining>
<button @click="flag = !flag"> 切换</button>
<component :is="flag?'logining':'mine'"></component>
</div>
<template id="login">
<div>
太阳
<button @click="add()">加</button>
{{msg}}{{num}}
</div>
</template>
<template id="mine">
<div>
书
<button @click="add2()">加</button>
{{msg}}{{num}}
</div>
</template>
<script>
// 定义组件
Vue.component('logining',{
template:'#login',
data(){
return{
msg:'?',
num:'',
msg2:'📕'
}
},
methods:{
add(){
this.num+= this.msg
},
add2() {
this.num += this.msg2
}
},
beforeCreate(){
console.log('beforeCreate');
},
created() {
console.log('created');
},
beforeDestroy() {
console.log('beforeDestroy');
},
destroyed() {
console.log('destroyed');
},
})
const vm = new Vue({
el: '#app',
data: {
flag:true,
},
methods: {
},
components:{
'mine':{
template: '#mine',
data() {
return {
msg: '?',
num: '',
msg2: '📕'
}
},
methods: {
add() {
this.num += this.msg
},
add2() {
this.num += this.msg2
}
},
beforeCreate() {
console.log('beforeCreate');
},
created() {
console.log('created');
},
beforeDestroy() {
console.log('beforeDestroy');
},
destroyed() {
console.log('destroyed');
},
}
}
})
</script>
</body>
</html>
|