<div id="#app">
<div>
<input type="button" name="" value="获取元素内容" @click="getElement">
<h1 ref="myh1">我是h1</h1>
//ref 获取元素 是在获取的那个元素上,肯定是承载元素的 标签上,写 ref="xxx" xxx是获取的 元素或组件 的别名
<my-com ref="mycom"></my-com>
//ref 获取组件
在获取的组件上 ref="xxx" 把获取的组件 起别名
</div>
</div>
<script type="text/javascript">
// 使用 this.$ref 来获取 元素和组件
Vue.component('my-com',{
template:'<h1>这是一个子组件</h1>',
data(){
return{
name:'子组件'
}
}
});
var vm=new Vue({
el:'#app',
methods:{
getElement(){
console.log(this.$refs.myh1.innerText);
console.log(this.$ref.mycom.name);
//通过 this.$ref.xxx(别名).xxx
}
},
data:{}
});
</script>
</body>
</html>
创建模板:
<script type="text/javascript">
Vue.component('xxx',{
template:'',
data(){
return{
}
}
});
//xxx 是模板名
</script>
模板的引用:
<body>
<xxx></xxx>
</body>