声明
<div id='app'>
<div id="box" ref="box">使用ref</div>
<son ref="son"></son>
<button @click="changeSon">改变</button>
</div>
<template id="son">
<div>
son{{myson}}
<button @click="log1">打印一</button>
</div>
</template>
调用
Vue.component('son', {
template: '#son',
data() {
return {
myson: 'myson'
}
},
methods: {
log1() {
console.log(1);
}
}
})
console.log(document.getElementById('box'));
const vm = new Vue({
el: '#app',
data: {
},
methods: {
changeSon() {
console.log(this.$refs.son.myson);
this.$refs.son.myson = 'father'
}
},
created() {
console.log(this.$refs);
},
mounted() {
console.log(this.$refs.box);
this.$refs.box.style.color = 'red'
this.$refs.box.style.fontSize = '40px'
console.log(this.$refs.son);
this.$refs.son.log1()
console.log(this.$refs.son.myson);
}
})