el
提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器,也可以是一个 HTMLElement 实例。
在实例挂载之后,元素可以用 vm.$el 访问。
父组件
<template>
<div id="app">
<div class="container">
<example ref="text"></example>
<button @click="add" ref="clickbutton">添加</button>
</div>
</div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld'
import example from '@/components/example'
export default {
components:{
HelloWorld,
example
},
mounted(){
},
data() {
return {
show: true
}
},
created(){
},
methods: {
add(){
console.log(this.$refs.text.innerText)
console.log(this.$refs.clickbutton.innerText)
console.log(this.$refs.text.$el.innerText)
}
}
};
</script>
<style>
.container{
padding: 30px;
height: 800px;
/* background: #000; */
}
</style>
子组件
<template>
<div>
<div class="content">
<h1>我是一个组件</h1>
</div>
</div>
</template>
<script>
export default {
props:{
},
data(){
return{
}
},
methods:{
}
}
</script>