<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://img.cdn.apipost.cn/mp/d44a51d7f879be97.webp"></script>
<script src="https://img.cdn.apipost.cn/mp/d44a51d7f879be97.webp"></script>
</head>
<body>
<div id="app">
<runoob ref='testst'></runoob>
<input type='input' ref='inputRef' />
<button @click='handleClick()'>点击</button>
</div>
<script>
/**
* 给子组件加ref标记 通过this.$refs可以获取到这个组件 别可以调用这个组件内部的函数 但是这个函数的this指向这个组件本身
* 给dom元素加ref标记 通过this.$refs可以获取到这个dom元素
*/
// 注册
Vue.component('runoob', {
template: '<h1>自定义组件!</h1>',
methods:{
sayname(name){
console.log(name,this)
}
},
data(){
return{
age:18,
}
}
})
// 创建根实例
new Vue({
el: '#app',
mounted(){
this.$refs.testst.sayname('hahahahahahahahahaha')
},
methods:{
handleClick(){
console.log(this.$refs.inputRef.value)
}
}
})
</script>
</body>
</html>
