vue的ref

前端小白 前端 2020-09-15
<!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>
中文版Postman,rap文档管理

评论