Table of contents
Preface
In the previous chapter of the blog, we explained the Vue life cycle, list filtering, calculated properties and listeners.
In this chapter, we will talk about Vue component development.
1. Use of components
Two ways to create components
var Header = {
template:'模板' ,
data是一个函数,
methods:功能,
components:子组件们
}//局部声明
Vue.component('组件名',组件对象);//全局注册 等于注册加声明了
Classification of components
- Common components (such as forms, pop-up windows, layout classes, etc.) (can be reused in multiple projects)
- Business components (lottery, machine classification) (reused in this project)
- Page components (each page of a single-page development program is a component, only completes functions and is not reused)
Trilogy of component development : declaration, registration, use
Note: If the naming of the subcomponent has camel case, separate it with "-" when using the subcomponent label.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
大家好,{
{
name}}
<hello></hello>
<saybyebye></saybyebye>
</div>
<template id="myhello">
<div>hello,{
{
name}}</div>
</template>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 注册了一个全局组件，名字叫hello
Vue.component('hello',{
template:`#myhello`,
data(){
return{
name:'我是hello'
}
}
})
// 定义一个局部组件
var saybyebye={
template:`<div>你好</div>`
}
var app = new Vue({
el:'#app',
data(){
return{
name:"张三",
}
},
// 注册局部组件
components:{
saybyebye
}
})
</script>
</html>
2. Slot slot
Slot is a hole left in the DOM when declaring a child component, so that the parent component can dynamically insert its own content into the hole when using the child component.
Moreover, the pit location can be named, that is to say, the sub-component names the pit location when it is declared, which facilitates the parent component to insert content in the specified pit location.
Slot is a dynamic DOM
- Slot usage:
- There are two steps: a. Leave holes in the sub-components. b. When the parent component uses the child component, assign a value to the pit.
- There must be parent-child components as a prerequisite.
- The purpose is to make sub-components dynamic.
Anonymous slot
- Anonymous slot means that no name is declared when declaring, and all contents will be displayed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
大家好,{
{
name}}
<hello></hello>
<saybyebye>
<div>我是插槽的内容</div>
</saybyebye>
</div>
<template id="myhello">
<div>hello,{
{
name}}</div>
</template>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 注册了一个全局组件，名字叫hello
Vue.component('hello',{
template:`#myhello`,
data(){
return{
name:'我是hello'
}
}
})
// 定义一个局部组件
var saybyebye={
template:`
<div>
<div>你好</div>
// 插槽内容
<slot></slot>
</div>
`
}
var app = new Vue({
el:'#app',
data(){
return{
name:"张三",
}
},
// 注册局部组件
components:{
saybyebye
}
})
</script>
</html>
named slot
- Named slots are declared with a name specified. Will be displayed selectively in sub-components
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
大家好,{
{
name}}
<hello></hello>
<saybyebye>
<div slot="niu1">我是插槽的内容</div>
<template #niu2>
<div>你好niu2</div>
</template>
<template v-slot:niu3>
<div>你好niu3</div>
</template>
</saybyebye>
</div>
<template id="myhello">
<div>hello,{
{
name}}</div>
</template>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 注册了一个全局组件，名字叫hello
Vue.component('hello',{
template:`#myhello`,
data(){
return{
name:'我是hello'
}
}
})
// 定义一个局部组件
var saybyebye={
template:`
<div>
<slot name="niu1"></slot>
<div>你好niu1</div>
// 插槽内容
<slot name="niu2"></slot>
<slot name="niu3"></slot>
</div>
`
}
var app = new Vue({
el:'#app',
data(){
return{
name:"张三",
}
},
// 注册局部组件
components:{
saybyebye
}
})
</script>
</html>
Three, refs and parent
The function of these two properties is to obtain the child component instance array and the parent component instance.
With an instance, you can easily operate the properties and methods of the component.
- refs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
大家好{
{
name}}
<button @click="ouda">打一顿</button>
<Myheader ref="dawa"></Myheader>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
Vue.prototype.$middleBus = new Vue();
var Myheader = {
template:`
<div>
子组件
{
{xingming}}--{
{Hp}}
</div>
`,
data(){
return{
xingming:'林宇豪',
Hp:100,
}
},
}
var app = new Vue({
el:'#app',
data(){
return{
name:'小豪',
}
},
methods:{
ouda(){
console.log("孽子，打一顿");
this.$refs.dawa.Hp = this.$refs.dawa.Hp - 10
},
},
components:{
Myheader
}
})
</script>
</html>
- parent
The use of $refs requires declaring your own reference name through the ref attribute on the child element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
大家好,我是{
{
name}}
<Myheader ref="dawa"></Myheader>
<Myheadererwa ref="erwa" ></Myheadererwa>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
Vue.prototype.$middleBus = new Vue();
var Myheader = {
template:`
<div>
</div>
`,
}
var Myheadererwa = {
template:`
<div>
<button @click="jiao">叫爷爷</button>
</div>
`,
data(){
return{
}
},
methods:{
jiao(){
this.$parent.name="爷爷"
},
},
}
var app = new Vue({
el:'#app',
data(){
return{
name:'小豪',
}
},
components:{
Myheader,
Myheadererwa
}
})
</script>
</html>
4. Communication between parent and child components
4.1. Pass from father to son: When passing from father to son, pass through attributes.
- In the child component tag, customize the properties and values
<Myheader ref="header" age="18" :sex="sex"></Myheader>
- Inside the subcomponent, get all values through the props attribute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
大家好{
{
name}}
<button @click="ouda">打一顿</button>
<button @click="anwei">安慰</button>
<button @click="xiaodao">看看导哥在干嘛</button>
<Myheader ref="dawa"></Myheader>
<Myheadererwa ref="erwa" age="2" :nengli="nengli2"></Myheadererwa>
<div id="mydiv"></div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
Vue.prototype.$middleBus = new Vue();
var Myheader = {
template:`
<div>
子组件
{
{xingming}}--{
{Hp}}
</div>
`,
data(){
return{
xingming:'林宇豪',
Hp:100,
}
},
}
var Myheadererwa = {
template:`
<div>
子组件
{
{xingming}}--{
{Hp}}
<button @click="jiao">叫爷爷</button>
二娃 = {
{age}} -- {
{nengli}}
</div>
`,
data(){
return{
xingming:'王导',
Hp:0,
}
},
methods:{
see(){
console.log("再看岛国动作片");
},
jiao(){
this.$parent.name="爷爷"
},
},
mounted(){
this.$middleBus.$on('jieshou',val=>{
// 使用箭头函数，可以不改变this的指向，仍然和外部的this保持一致，指向child01
console.log(val);
});
},
props:['age','nengli'],
}
var app = new Vue({
el:'#app',
data(){
return{
name:'小豪',
nengli2:"千里眼,顺风耳"
}
},
methods:{
ouda(){
console.log("孽子，打一顿");
this.$refs.dawa.Hp = this.$refs.dawa.Hp - 10
// if(this.$refs.dawa.Hp<=0){
// document.getElementById("#mydiv").innerHTML="已经死了不能在死了爹"
// }
},
anwei(){
console.log("抽了一巴掌，安慰了一下");
this.$refs.erwa.Hp = this.$refs.erwa.Hp + 10
},
xiaodao(){
this.$refs.erwa.see()
},
},
components:{
Myheader,
Myheadererwa
}
})
</script>
</html>
4.2, parent component listens to custom events
<Myheadererwa -parent-event="bainian" ref="erwa" age="2" :nengli="nengli2"></Myheadererwa>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
大家好{
{
changname}}
<button @click="ouda">打一顿</button>
<button @click="anwei">安慰</button>
<button @click="xiaodao">看看导哥在干嘛</button>
<Myheader ref="dawa"></Myheader>
<Myheadererwa @to-parent-event="bainian" ref="erwa" age="2" :nengli="nengli2"></Myheadererwa>
<div id="mydiv"></div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
Vue.prototype.$middleBus = new Vue();
var Myheader = {
template:`
<div>
子组件
{
{xingming}}--{
{Hp}}
<button @click="chuanzhi">发送一条信息</button>
</div>
`,
data(){
return{
xingming:'林宇豪',
Hp:100,
}
},
methods:{
chuanzhi(){
this.$middleBus.$emit('jieshou','你好child01,我是child02');
}
}
}
var Myheadererwa = {
template:`
<div>
子组件
{
{xingming}}--{
{Hp}}
<button @click="jiao">叫爷爷</button>
<button @click="happyNewYear">给爷爷拜年</button>
二娃 = {
{age}} -- {
{nengli}}
</div>
`,
data(){
return{
xingming:'王导',
Hp:0,
}
},
methods:{
see(){
console.log("再看岛国动作片");
},
jiao(){
this.$parent.name="爷爷"
},
happyNewYear(){
// 触发自定义事件
this.$emit('to-parent-event',this.xingming)
}
},
mounted(){
this.$middleBus.$on('jieshou',val=>{
// 使用箭头函数，可以不改变this的指向，仍然和外部的this保持一致，指向child01
console.log(val);
});
},
props:['age','nengli'],
}
var app = new Vue({
el:'#app',
data(){
return{
changname:'小豪',
nengli2:"千里眼,顺风耳"
}
},
methods:{
ouda(){
console.log("孽子，打一顿");
this.$refs.dawa.Hp = this.$refs.dawa.Hp - 10
// if(this.$refs.dawa.Hp<=0){
// document.getElementById("#mydiv").innerHTML="已经死了不能在死了爹"
// }
},
anwei(){
console.log("抽了一巴掌，安慰了一下");
this.$refs.erwa.Hp = this.$refs.erwa.Hp + 10
},
xiaodao(){
this.$refs.erwa.see()
},
bainian(xingming){
console.log(xingming+"给您拜年了 ");
}
},
components:{
Myheader,
Myheadererwa
}
})
</script>
</html>
5. Communication between non-parent-child components
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
大家好{
{
changname}}
<button @click="ouda">打一顿</button>
<button @click="anwei">安慰</button>
<button @click="xiaodao">看看导哥在干嘛</button>
<Myheader ref="dawa"></Myheader>
<Myheadererwa @to-parent-event="bainian" ref="erwa" age="2" :nengli="nengli2"></Myheadererwa>
<div id="mydiv"></div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
Vue.prototype.$middleBus = new Vue();
var Myheader = {
template:`
<div>
子组件
{
{xingming}}--{
{Hp}}
<button @click="chuanzhi">发送一条信息</button>
</div>
`,
data(){
return{
xingming:'林宇豪',
Hp:100,
}
},
methods:{
chuanzhi(){
this.$middleBus.$emit('jieshou','你好child01,我是child02');
}
}
}
var Myheadererwa = {
template:`
<div>
子组件
{
{xingming}}--{
{Hp}}
<button @click="jiao">叫爷爷</button>
<button @click="happyNewYear">给爷爷拜年</button>
二娃 = {
{age}} -- {
{nengli}}
</div>
`,
data(){
return{
xingming:'王导',
Hp:0,
}
},
methods:{
see(){
console.log("再看岛国动作片");
},
jiao(){
this.$parent.name="爷爷"
},
happyNewYear(){
// 触发自定义事件
this.$emit('to-parent-event',this.xingming)
}
},
mounted(){
this.$middleBus.$on('jieshou',val=>{
// 使用箭头函数，可以不改变this的指向，仍然和外部的this保持一致，指向child01
console.log(val);
});
},
props:['age','nengli'],
}
var app = new Vue({
el:'#app',
data(){
return{
changname:'小豪',
nengli2:"千里眼,顺风耳"
}
},
methods:{
ouda(){
console.log("孽子，打一顿");
this.$refs.dawa.Hp = this.$refs.dawa.Hp - 10
// if(this.$refs.dawa.Hp<=0){
// document.getElementById("#mydiv").innerHTML="已经死了不能在死了爹"
// }
},
anwei(){
console.log("抽了一巴掌，安慰了一下");
this.$refs.erwa.Hp = this.$refs.erwa.Hp + 10
},
xiaodao(){
this.$refs.erwa.see()
},
bainian(xingming){
console.log(xingming+"给您拜年了 ");
}
},
components:{
Myheader,
Myheadererwa
}
})
</script>
</html>
- Create a public component
Vue.prototype.$middleBus = new Vue();
- The sender, on the public component, triggers an event
this.$middleBus.$emit('sendMsg','你好child01,我是child02');
- Receiver, listens to this event on the public component and accepts data
this.$middleBus.$on('sendMsg',val=>{
// 使用箭头函数，可以不改变this的指向，仍然和外部的this保持一致，指向child01
this.msg = val;
});
6. Mixin
-
definition
- Provides a very flexible way to distribute reusable functions in Vue components. A mixin can contain arbitrary component options. When a component uses a mixin, all of the mixin's options will be "mixed" into the options of the component itself.
-
Writing method
- local
- Define a mix-in object
- local
var myMixin = {
data() {
return {
mixinname: '混入姓名',
};
},
mounted() {
console.log('我是混入的组件');
},
};
- project
mixins: [myMixin],
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
大家好{
{
changname}}
<button @click="ouda">打一顿</button>
<button @click="anwei">安慰</button>
<button @click="xiaodao">看看导哥在干嘛</button>
<Myheader ref="dawa"></Myheader>
<Myheadererwa @to-parent-event="bainian" ref="erwa" age="2" :nengli="nengli2"></Myheadererwa>
<div id="mydiv"></div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
Vue.prototype.$middleBus = new Vue();
var commonMixin = {
data(){
return{
mixinName:'葫芦'
}
},
mounted(){
console.log( "混入对象" +this.mixinName);
}
}
var Myheader = {
template:`
<div>
子组件
{
{xingming}}--{
{Hp}}---{
{mixinName}}
<button @click="chuanzhi">发送一条信息</button>
</div>
`,
data(){
return{
xingming:'林宇豪',
Hp:100,
}
},
methods:{
chuanzhi(){
this.$middleBus.$emit('jieshou','你好child01,我是child02');
}
},
mixins:[commonMixin]
}
var Myheadererwa = {
template:`
<div>
子组件
{
{xingming}}--{
{Hp}}
<button @click="jiao">叫爷爷</button>
<button @click="happyNewYear">给爷爷拜年</button>
二娃 = {
{age}} -- {
{nengli}}
</div>
`,
data(){
return{
xingming:'王导',
Hp:0,
}
},
methods:{
see(){
console.log("再看岛国动作片");
},
jiao(){
this.$parent.name="爷爷"
},
happyNewYear(){
// 触发自定义事件
this.$emit('to-parent-event',this.xingming)
}
},
mounted(){
this.$middleBus.$on('jieshou',val=>{
// 使用箭头函数，可以不改变this的指向，仍然和外部的this保持一致，指向child01
console.log(val);
});
},
props:['age','nengli'],
}
var app = new Vue({
el:'#app',
data(){
return{
changname:'小豪',
nengli2:"千里眼,顺风耳"
}
},
methods:{
ouda(){
console.log("孽子，打一顿");
this.$refs.dawa.Hp = this.$refs.dawa.Hp - 10
// if(this.$refs.dawa.Hp<=0){
// document.getElementById("#mydiv").innerHTML="已经死了不能在死了爹"
// }
},
anwei(){
console.log("抽了一巴掌，安慰了一下");
this.$refs.erwa.Hp = this.$refs.erwa.Hp + 10
},
xiaodao(){
this.$refs.erwa.see()
},
bainian(xingming){
console.log(xingming+"给您拜年了 ");
}
},
components:{
Myheader,
Myheadererwa
}
})
</script>
</html>
global mixin
- Define a mix-in object
- Introduce and use
Vue.mixin(myMixin);
Notice
- When components and mixins contain options with the same name, these options will be "merged"
- Component data takes precedence when options conflict
- Use global mixins with caution as they affect instances as well as every component
at last
祝大家： 愿每个人都能遵循自己的时钟，做不后悔的选择。