一、$refs的使用
$refs和ref是一起使用的，
通過ref給子組件綁定一個id，
使用this.$refs.id就能獲取到特定的子組件
image.png
image.png
<div id="app">
<cpn></cpn>
</div>
<template id="cpn">
<div>
<cpn1></cpn1>
<cpn2 ref="cpn2"></cpn2>
<button @click="showChildCpn">顯示所有子組件信息</button>
</div>
</template>
<template id="cpn1">
<div>
<h2>子組件1</h2>
</div>
</template>
<template id="cpn2">
<div>
<h2>子組件2</h2>
</div>
</template>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const cpn = Vue.extend({
template: '#cpn',
components: {
/*子組件1*/
cpn1:{
template: '#cpn1',
data() {
return{
name:'one'
}
}
},
/*子組件2*/
cpn2:{
template: '#cpn2',
data(){
return{
name:'two'
}
}
}
},
methods: {
/*打印子組件對象*/
showChildCpn() {
console.log(this.$refs.cpn2.name)
}
}
})
const app = new Vue({
el: '#app',
/*注冊父組件*/
components: {
cpn: cpn
}
})
</script>
獲取cpn2子組件的name
image.png
