【09.vue中組件的自定義事件】
自定義組件鏈接
- 在vue中用的click【點(diǎn)擊】、keyup【按鍵】……等事件，這些屬于內(nèi)置事件，也就是js自帶的事件。
問(wèn)題一：什么是組件自定義事件呢？
- 【內(nèi)置事件】:是給html元素用的，比如span、div等標(biāo)簽，不是組件。
- 【自定義事件】：顧名思義就是自己打造的事件，包含事件名，事件回調(diào)函數(shù)等，定義好之后去給組件使用。也是一種組件間的通信方式，適用于子組件==>父組件。這里我們通過(guò)傳值去講述自定義事件如何使用。
問(wèn)題二：如何實(shí)現(xiàn)子組件給父組件傳值？
(1）利用props傳值實(shí)現(xiàn)
? 通過(guò)props也可以實(shí)現(xiàn)，先定義父子組件，school是父組件，student是子組件。
School.vue父組件
-
props傳值：父組件需要提前給子組件一個(gè)函數(shù)【getStudentName】，子組件用props聲明接收那個(gè)函數(shù)【getStudentName】
-
注意：使用props屬性時(shí)，需要使用冒號(hào)來(lái)區(qū)別傳入的是雙引號(hào)里面的內(nèi)容還是字符串，這里我們傳的是一個(gè)函數(shù)，因此需要用冒號(hào)去識(shí)別函數(shù)名
-
具體寫(xiě)法對(duì)應(yīng)是：
<Student :子組件發(fā)送數(shù)據(jù)時(shí)調(diào)用的方法名="父組件接收數(shù)據(jù)的方法名"> </Student> <Student :getStudentName="getStudentName"/>
<template>
<div class="school">
<h1>父組件:School</h1>
<Student :getStudentName="getStudentName"/>
<h1>子組件Student傳過(guò)來(lái)的值：{{ StudentName }}</h1>
</div>
</template>
<script>
import Student from './Student';
export default {
name: 'School',
components: {Student},
data() {
return {
StudentName:'',
};
},
methods: {
getStudentName(name){
console.log('School收到了學(xué)生名：',name)
this.StudentName= name
}
},
};
</script>
<style scoped>
.school {
background-color: rgb(73, 192, 150);
}
</style>
Student.vue子組件
-
首先需要用props聲明接收父組件傳的函數(shù)【getStudentName】。然后給按鈕添加點(diǎn)擊事件，通過(guò)點(diǎn)擊來(lái)觸發(fā)點(diǎn)擊事件，從而調(diào)用sendStudentlName(name)方法【
帶參數(shù):子組件中的參數(shù)name: '何大春'】，在該方法中調(diào)用已經(jīng)聲明過(guò)的父組件中的函數(shù)getStudentName(Studentname)，并傳入你要傳遞的數(shù)據(jù)參數(shù)，這就已經(jīng)實(shí)現(xiàn)子組件向父組件傳參，最后將該參數(shù)在父組件的模板中展示出來(lái)即可。 -
props子組件給父組件傳遞數(shù)據(jù)的過(guò)程就是：
- 子組件通過(guò)調(diào)用父組件傳過(guò)來(lái)接收子組件數(shù)據(jù)的方法，來(lái)實(shí)現(xiàn)子組件數(shù)據(jù)向父組件的傳遞。
<template>
<div class="student">
<h1>子組件信息</h1>
<h2>學(xué)生姓名：{{ name }}</h2>
<h2>學(xué)生性別：{{ sex }}</h2>
<h2>學(xué)生年齡：{{ age }}</h2>
<h2>學(xué)生成績(jī)：{{ score }}</h2>
<!-- 點(diǎn)擊事件觸發(fā)，調(diào)用函數(shù)sendStudentlName(name)，并給該函數(shù)傳一個(gè)data里面的參數(shù)name -->
<button class="haha" @click="sendStudentlName(name)"><h2>點(diǎn)擊此處給父組件School傳值</h2></button>
</div>
</template>
<script>
export default {
name: 'Student',
props:['getStudentName'],
data() {
return {
name: '何大春',
sex: '男',
age: '22',
score: '88',
};
},
methods: {
// 這里的Studentname就是name,別搞混了，我隨便命名的
sendStudentlName(Studentname) {
// 調(diào)用父組件中的函數(shù)，并把子組件中的參數(shù)name傳給父組件
this.getStudentName(Studentname)
},
},
};
</script>
<style lang="less" scoped>
.student {
background-color: tomato;
padding: 50px;
margin-top: 50px;
margin-left: 50px;
width: 300px;
height: 350px;
}
.h2 {
padding: 5px;
margin: 5px 5px 5px 5px;
}
.haha {
background-color: rgb(211, 233, 130);
}
</style>
App.vue組件
<template>
<div>
<School/>
</div>
</template>
<script>
import School from "./components/School";
export default {
name: 'App',
components: {School},
data() {
return {};
},
};
</script>
界面展示：
(2）利用組件自定義事件實(shí)現(xiàn)父子傳值
? 組件自定義事件需要用到v-on，也就是v-on在誰(shuí)身上，就是在誰(shuí)的組件實(shí)例上綁定了事件。
-
①在父組件School中給子組件Student綁定一個(gè)自定義事件getName
<!-- 給子組件的實(shí)例對(duì)象VC綁定了事件getName，該事件觸發(fā)會(huì)調(diào)用函數(shù)getStudentName --> <Student v-on:getName="getStudentName"/> -
②如何觸發(fā)自定義事件getName：在誰(shuí)身上定義的就找誰(shuí)觸發(fā)，所以，我們需要找子組件的實(shí)例對(duì)象VC觸發(fā)
- 在子組件Student的實(shí)例對(duì)象上去，觸發(fā)自定義事件
getName：this.$emit('getName',參數(shù)1,...,參數(shù)n)
- 在子組件Student的實(shí)例對(duì)象上去，觸發(fā)自定義事件
-
子組件傳入?yún)?shù)。不傳參數(shù)就是單純的觸發(fā)父組件對(duì)應(yīng)的函數(shù)。
sendStudentlName() { // 觸發(fā)自定義事件getName，并把子組件中的參數(shù)name傳給父組件 this.$emit('getName',this.name,this.age,this.score) }, -
父組件接收子組件的參數(shù)
methods: { /* getStudentName(name,age,score){ console.log('School收到了學(xué)生名：',name,age,score) this.StudentName= name } */ // 可以傳多個(gè)參數(shù)【...params】 getStudentName(name,...params){ console.log('School收到了學(xué)生名：',name,params) // School收到了學(xué)生名： 何大春 (2) ['22', '88'] this.StudentName= name this.StudentAge = params[0] } },
完整代碼：
School.vue父組件【樣式不變，還是上面的樣式】
<template>
<div class="school">
<h1>父組件:School</h1>
<!-- 給子組件的實(shí)例對(duì)象VC綁定了事件getName，該事件觸發(fā)會(huì)調(diào)用函數(shù)getStudentName -->
<Student v-on:getName="getStudentName"/>
<h1>子組件Student傳過(guò)來(lái)的name：{{ StudentName }}</h1>
<h1>子組件Student傳過(guò)來(lái)的age：{{ StudentAge }}</h1>
</div>
</template>
<script>
import Student from './Student';
export default {
name: 'School',
components: {Student},
data() {
return {
StudentName:'',
StudentAge:'',
};
},
methods: {
/* getStudentName(name,age,score){
console.log('School收到了學(xué)生名：',name,age,score)
this.StudentName= name
} */
// 可以傳多個(gè)參數(shù)【...params】
getStudentName(name,...params){
console.log('School收到了學(xué)生名：',name,params)
// School收到了學(xué)生名： 何大春 (2) ['22', '88']
this.StudentName= name
this.StudentAge = params[0]
}
},
};
</script>
Student.vue子組件
<template>
<div class="student">
<h1>子組件信息</h1>
<h2>學(xué)生姓名：{{ name }}</h2>
<h2>學(xué)生性別：{{ sex }}</h2>
<h2>學(xué)生年齡：{{ age }}</h2>
<h2>學(xué)生成績(jī)：{{ score }}</h2>
<!-- 點(diǎn)擊事件觸發(fā)，調(diào)用函數(shù)sendStudentlName(name)，并給該函數(shù)傳一個(gè)data里面的參數(shù)name -->
<!-- <button class="haha" @click="sendStudentlName(name)">
<h2>點(diǎn)擊此處給父組件School傳值</h2></button> -->
<button class="haha" @click="sendStudentlName()">
<h2>點(diǎn)擊此處給父組件School傳值</h2></button>
</div>
</template>
<script>
export default {
name: 'Student',
data() {
return {
name: '何大春',
sex: '男',
age: '22',
score: '88',
};
},
methods: {
// 這里的Studentname就是name,別搞混了，我隨便命名的
/* sendStudentlName(Studentname) {
// 觸發(fā)自定義事件getName，并把子組件中的參數(shù)name傳給父組件
this.$emit('getName',Studentname)
}, */
sendStudentlName() {
// 觸發(fā)自定義事件getName，并把子組件中的參數(shù)name傳給父組件
console.log("發(fā)送數(shù)據(jù)")
this.$emit('getName',this.name,this.age,this.score)
},
},
};
</script>
- 【簡(jiǎn)寫(xiě)】:v-on的簡(jiǎn)寫(xiě)形式就是@
(3）利用ref實(shí)現(xiàn)父子傳值
? ref相當(dāng)于一個(gè)組件的標(biāo)識(shí)，可以直接拿到該組件的實(shí)例對(duì)象?！纠胷ef屬性拿到子組件的實(shí)例對(duì)象，再利用$on給子組件綁定自定義事件，相當(dāng)于換了一個(gè)綁定自定義事件的方法】
-
ref 加在子組件上，用
this.$refs.（ref值）獲取到的是組件實(shí)例vc，可以使用組件的所有方法和屬性。<Student ref="studentRef"/> -
如何通過(guò)ref去綁定自定義事件：通過(guò)
$on// 當(dāng)父組School件掛載完畢時(shí)，通過(guò)$on去綁定自定義事件，以及調(diào)用的函數(shù)。 mounted() { this.$refs.studentRef.$on('getName',this.getStudentName) // 自定義事件只觸發(fā)一次 // this.$refs.studentRef.$once('getName',this.getStudentName) }, -
好處是：雖然麻煩但靈活性強(qiáng)，比如我們想3秒之后再調(diào)用這個(gè)事件我們可以直接添加一個(gè)定時(shí)器:
// 3s之前，不會(huì)觸發(fā)；3秒鐘過(guò)后，才能觸發(fā)該自定義事件 setTimeout(() => { this.$refs.studentRef.$on('getName',this.getStudentName) }, 3000);
只想觸發(fā)一次函數(shù)，怎么辦？
-
第一種 ：ref形式的自定義事件，將
$on，改為$once// 自定義事件只觸發(fā)一次 this.$refs.studentRef.$once('getName',this.getStudentName) -
第二種： v-on形式的自定義事件，添加once修飾符
<Student v-on:getName.once="getStudentName"/> <!-- <Student @getName.once="getStudentName"/> -->
完整代碼：
School.vue父組件【樣式不變，還是上面的樣式】
<template>
<div class="school">
<h1>父組件:School</h1>
<!-- <Student v-on:getName.once="getStudentName"/> -->
<!-- <Student @getName.once="getStudentName"/> -->
<Student ref="studentRef"/>
<h1>子組件Student傳過(guò)來(lái)的name：{{ StudentName }}</h1>
<h1>子組件Student傳過(guò)來(lái)的age：{{ StudentAge }}</h1>
</div>
</template>
<script>
import Student from './Student';
export default {
name: 'School',
components: {Student},
data() {
return {
StudentName:'',
StudentAge:'',
};
},
methods: {
/* getStudentName(name,age,score){
console.log('School收到了學(xué)生名：',name,age,score)
this.StudentName= name
} */
// 可以傳多個(gè)參數(shù)【...params】
getStudentName(name,...params){
console.log('School收到了學(xué)生名：',name,params)
// School收到了學(xué)生名： 何大春 (2) ['22', '88']
this.StudentName= name
this.StudentAge = params[0]
}
},
// 當(dāng)父組件掛載完畢時(shí)，通過(guò)$on去綁定自定義事件，以及調(diào)用的函數(shù)。
mounted() {
// 3s之前，不會(huì)觸發(fā)；3秒鐘過(guò)后，才能觸發(fā)該自定義事件
/* setTimeout(() => {
this.$refs.studentRef.$on('getName',this.getStudentName)
}, 3000); */
this.$refs.studentRef.$on('getName',this.getStudentName)
// 事件只觸發(fā)一次
// this.$refs.studentRef.$once('getName',this.getStudentName)
},
};
</script>
Student.vue子組件
<template>
<div class="student">
<h1>子組件信息</h1>
<h2>學(xué)生姓名：{{ name }}</h2>
<h2>學(xué)生性別：{{ sex }}</h2>
<h2>學(xué)生年齡：{{ age }}</h2>
<h2>學(xué)生成績(jī)：{{ score }}</h2>
<!-- 點(diǎn)擊事件觸發(fā)，調(diào)用函數(shù)sendStudentlName(name)，并給該函數(shù)傳一個(gè)data里面的參數(shù)name -->
<!-- <button class="haha" @click="sendStudentlName(name)"><h2>點(diǎn)擊此處給父組件School傳值</h2></button> -->
<button class="haha" @click="sendStudentlName()">
<h2>點(diǎn)擊此處給父組件School傳值</h2></button>
</div>
</template>
<script>
export default {
name: 'Student',
data() {
return {
name: '何大春',
sex: '男',
age: '22',
score: '88',
};
},
methods: {
// 這里的Studentname就是name,別搞混了，我隨便命名的
/* sendStudentlName(Studentname) {
// 觸發(fā)自定義事件getName，并把子組件中的參數(shù)name傳給父組件
this.$emit('getName',Studentname)
}, */
sendStudentlName() {
// 觸發(fā)自定義事件getName，并把子組件中的參數(shù)name傳給父組件
console.log("發(fā)送數(shù)據(jù)")
this.$emit('getName',this.name,this.age,this.score)
},
},
};
</script>
自定義事件，怎么解綁？【vc.$off[‘A’,‘B’]】
-
【解綁單個(gè)事件】在子組件Student中定義一個(gè)解綁按鈕。
<button class="haha" @click="unbind">點(diǎn)擊此處解綁</button> -
在子組件的methods中配置，解綁單個(gè)自定義事件。
// 解綁自定義事件：getName unbind(){ console.log("解綁后"); this.$off('getName') }
-
【解綁多個(gè)自定義事件】
-
定義兩個(gè)自定義事件:getName,getAge
this.$refs.studentRef.$on('getName',this.getStudentName) this.$refs.studentRef.$on('getAge',this.getStudentAge) -
解綁多個(gè)事件：
// 解綁自定義事件：getName unbind(){ console.log("解綁后"); // 解綁多個(gè)事件 this.$off(['getName','getAge']) // 解綁多個(gè)事件 // this.$off() } -
解綁全部事件：
// 解綁全部事件 this.$off()
-
完整代碼：
School.vue
<template>
<div class="school">
<h1>父組件:School</h1>
<!-- <Student v-on:getName.once="getStudentName"/> -->
<!-- <Student @getName.once="getStudentName"/> -->
<Student ref="studentRef"/>
<h1>子組件Student傳過(guò)來(lái)的name：{{ StudentName }}</h1>
<h1>子組件Student傳過(guò)來(lái)的age：{{ StudentAge }}</h1>
</div>
</template>
<script>
import Student from './Student';
export default {
name: 'School',
components: {Student},
data() {
return {
StudentName:'',
StudentAge:'',
};
},
methods: {
/* getStudentName(name,age,score){
console.log('School收到了學(xué)生名：',name,age,score)
this.StudentName= name
} */
// 可以傳多個(gè)參數(shù)【...params】
getStudentName(name,...params){
console.log('School收到了學(xué)生名：',name,params)
// School收到了學(xué)生名： 何大春 (2) ['22', '88']
this.StudentName= name
// this.StudentAge = params[0]
},
getStudentAge(age){
console.log('School收到了學(xué)生age：',age)
// School收到了學(xué)生名： 何大春 (2) ['22', '88']
this.StudentAge=age
// this.StudentAge = params[0]
}
},
// 當(dāng)父組件掛載完畢時(shí)，通過(guò)$on去綁定自定義事件，以及調(diào)用的函數(shù)。
mounted() {
// 3s之前，不會(huì)觸發(fā)；3秒鐘過(guò)后，才能觸發(fā)該自定義事件
/* setTimeout(() => {
this.$refs.studentRef.$on('getName',this.getStudentName)
}, 3000); */
this.$refs.studentRef.$on('getName',this.getStudentName)
this.$refs.studentRef.$on('getAge',this.getStudentAge)
// 事件只觸發(fā)一次
// this.$refs.studentRef.$once('getName',this.getStudentName)
},
};
</script>
<style scoped>
.school {
background-color: rgb(73, 192, 150);
}
</style>
Student.vue
<template>
<div class="student">
<h1>子組件信息</h1>
<h2>學(xué)生姓名：{{ name }}</h2>
<h2>學(xué)生性別：{{ sex }}</h2>
<h2>學(xué)生年齡：{{ age }}</h2>
<h2>學(xué)生成績(jī)：{{ score }}</h2>
<!-- 點(diǎn)擊事件觸發(fā)，調(diào)用函數(shù)sendStudentlName(name)，并給該函數(shù)傳一個(gè)data里面的參數(shù)name -->
<!-- <button class="haha" @click="sendStudentlName(name)"><h2>點(diǎn)擊此處給父組件School傳值</h2></button> -->
<button class="haha" @click="sendStudentlName()">
點(diǎn)擊此處給父組件School傳Name</button>
<button class="haha" @click="sendStudentlAge()">
點(diǎn)擊此處給父組件School傳Age</button>
<button class="heihei" @click="unbind"><h2>點(diǎn)擊此處解綁</h2></button>
</div>
</template>
<script>
export default {
name: 'Student',
data() {
return {
name: '何大春',
sex: '男',
age: '22',
score: '88',
};
},
methods: {
// 這里的Studentname就是name,別搞混了，我隨便命名的
/* sendStudentlName(Studentname) {
// 觸發(fā)自定義事件getName，并把子組件中的參數(shù)name傳給父組件
this.$emit('getName',Studentname)
}, */
sendStudentlName() {
// 觸發(fā)自定義事件getName，并把子組件中的參數(shù)name傳給父組件
console.log("發(fā)送數(shù)據(jù)")
this.$emit('getName',this.name,this.age,this.score)
},
sendStudentlAge() {
// 觸發(fā)自定義事件getName，并把子組件中的參數(shù)name傳給父組件
console.log("發(fā)送數(shù)據(jù)")
this.$emit('getAge',this.age)
},
// 解綁自定義事件：getName
unbind(){
console.log("解綁后");
// 解綁單個(gè)事件
// this.$off('getName')
// 解綁多個(gè)事件
// this.$off(['getName','getAge'])
// 解綁多個(gè)事件
this.$off()
},
},
};
</script>
<style lang="less" scoped>
.student {
background-color: tomato;
padding: 20px;
margin-top: 20px;
margin-left: 50px;
width: 300px;
height: 400px;
}
.h2 {
padding: 5px;
margin: 5px 5px 5px 5px;
}
.haha {
background-color: rgb(211, 233, 130);
}
.heihei{
background-color: aquamarine;
}
</style>
-
【銷(xiāo)毀組件實(shí)例】:
this.$destroy()生命周期鉤子銷(xiāo)毀了當(dāng)前的組件實(shí)例，組件上事件監(jiān)聽(tīng)沒(méi)了，自定義事件也不奏效，但是，注意：原生DOM也銷(xiāo)毀了—【下面案例中的add()方法也被銷(xiāo)毀了】。<button @click="add">Number++：{{ number }}</button> <button class="hehe" @click="death"><h3>銷(xiāo)毀當(dāng)前student組件實(shí)例對(duì)象（VC）</h3></button>add(){ console.log("add回調(diào)被調(diào)用了"); this.number++ }, // 銷(xiāo)毀Student組件實(shí)例 death(){ // 銷(xiāo)毀了當(dāng)前student組件實(shí)例對(duì)象（VC） console.log("銷(xiāo)毀了當(dāng)前student組件實(shí)例對(duì)象后"); this.$destroy() }, -
如果vm被銷(xiāo)毀了，那么，vm里面的所有子組件都會(huì)被銷(xiāo)毀。
不管子組件，父組件，還是App，vm組件哪一個(gè)被銷(xiāo)毀了，下圖界面中的按鈕【按鈕都在子組件Student中】不管如何點(diǎn)擊，都是沒(méi)有反映的。
完整代碼：
School.vue
-
School.vue父組件代碼不變。
Student.vue
<template>
<div class="student">
<h1>子組件信息</h1>
<h2>學(xué)生姓名：{{ name }}</h2>
<h2>學(xué)生性別：{{ sex }}</h2>
<h2>學(xué)生年齡：{{ age }}</h2>
<h2>學(xué)生成績(jī)：{{ score }}</h2>
<!-- 點(diǎn)擊事件觸發(fā)，調(diào)用函數(shù)sendStudentlName(name)，并給該函數(shù)傳一個(gè)data里面的參數(shù)name -->
<!-- <button class="haha" @click="sendStudentlName(name)"><h2>點(diǎn)擊此處給父組件School傳值</h2></button> -->
<button class="haha" @click="sendStudentlName()">
點(diǎn)擊此處給父組件School傳Name</button>
<button class="haha" @click="sendStudentlAge()">
點(diǎn)擊此處給父組件School傳Age</button>
<button @click="add">Number++：{{ number }}</button>
<button class="hehe" @click="death"><h3>銷(xiāo)毀當(dāng)前student組件實(shí)例對(duì)象（VC）</h3></button>
<button class="heihei" @click="unbind"><h3>點(diǎn)擊此處解綁</h3></button>
</div>
</template>
<script>
export default {
name: 'Student',
data() {
return {
name: '何大春',
sex: '男',
age: '22',
score: '88',
number:0
};
},
methods: {
// 這里的Studentname就是name,別搞混了，我隨便命名的
/* sendStudentlName(Studentname) {
// 觸發(fā)自定義事件getName，并把子組件中的參數(shù)name傳給父組件
this.$emit('getName',Studentname)
}, */
sendStudentlName() {
// 觸發(fā)自定義事件getName，并把子組件中的參數(shù)name傳給父組件
console.log("發(fā)送數(shù)據(jù)")
this.$emit('getName',this.name,this.age,this.score)
},
sendStudentlAge() {
// 觸發(fā)自定義事件getName，并把子組件中的參數(shù)name傳給父組件
console.log("發(fā)送數(shù)據(jù)")
this.$emit('getAge',this.age)
},
add(){
console.log("add回調(diào)被調(diào)用了");
this.number++
},
// 銷(xiāo)毀Student組件實(shí)例
death(){
// 銷(xiāo)毀了當(dāng)前student組件實(shí)例對(duì)象（VC）
console.log("銷(xiāo)毀了當(dāng)前student組件實(shí)例對(duì)象后");
this.$destroy()
},
// 解綁自定義事件：getName
unbind(){
console.log("解綁后");
// 解綁單個(gè)事件
// this.$off('getName')
// 解綁多個(gè)事件
// this.$off(['getName','getAge'])
// 解綁多個(gè)事件
this.$off()
},
},
};
</script>
<style lang="less" scoped>
.student {
background-color: tomato;
padding: 20px;
margin-top: 20px;
margin-left: 50px;
width: 300px;
height: 500px;
}
.h2 {
padding: 5px;
}
.haha {
background-color: rgb(211, 233, 130);
}
.heihei{
background-color: aquamarine;
}
.hehe{
background-color: rgb(121, 195, 232);
}
</style>
總結(jié)：
-
一種組件間通信的方式，適用于：子組件 ===> 父組件
-
使用場(chǎng)景：A是父組件，B是子組件，B想給A傳數(shù)據(jù)，那么就要在A中給B綁定自定義事件（事件的觸發(fā)和傳參在B中，但事件的回調(diào)在A中）。
-
綁定自定義事件：
-
第一種方式，在父組件中：
<Demo @getName="test"/>或<Demo v-on:getName="test"/> -
第二種方式，在父組件中：
<Demo ref="demo"/> ...... mounted(){ this.$refs.xxx.$on('getName',this.test) }- 若想讓自定義事件只能觸發(fā)一次，可以使用
once修飾符，或$once方法。
-
-
觸發(fā)自定義事件：
this.$emit('getName',數(shù)據(jù)) -
解綁自定義事件
this.$off('getName') -
組件上也可以綁定原生DOM事件，需要使用
native修飾符。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-491838.html -
注意：通過(guò)
this.$refs.xxx.$on('getName',回調(diào)函數(shù))綁定自定義事件時(shí)，回調(diào)要么配置在methods中，要么用箭頭函數(shù)，否則this指向會(huì)出問(wèn)題！文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-491838.html
到了這里，關(guān)于前端vue入門(mén)(純代碼)09的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
