<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 下面是一个h1标签 -->
<h1 ref='hh'>hello father</h1>
<!-- 下面是一个子组件child -->
<child ref='cc'></child>
<!-- 下面是v-for循环出来的li -->
<ul>
<li v-for='item in arr' :key='item' ref='ll'>{{item}}</li>
</ul>
<button @click='clickHanlder'>click me</button>
</div>
<script src="https://cn.vuejs.org/js/vue.js"></script>
<script>
/*
ref传值
== 你可以在标签或者组件上添加ref属性
== 属性值是一个字符串
== 比如: ref='hh'
== 写了ref属性以后，可以通过 : vm.$refs.hh 获取当前的标签或者组件
*/
// 全局子组件
Vue.component('child',{
template:`<div>{{childname}}</div>`,
data(){
return {
childname:'lucy'
}
},
methods:{
getState(data){
console.log(data)
}
}
})
let vm = new Vue({
el:'#app',
data:{
arr:[
'中文','韩文','马来西亚'
]
},
methods:{
clickHanlder(){
// 如果ref='hh'是在一个标签上，那获取的就是dom节点
console.log(this.$refs.hh)
// 如果ref='ll'是在一个循环的标签上，那获取的就是dom节点集合
console.log(this.$refs.ll)
// 如果ref='cc'实在一个组件标签上，那获取的就是当前的组件实例
console.log(this.$refs.cc)
// 获取子组件child里面的变量值
console.log(this.$refs.cc.childname)
// 可以给子组件child里面的变量赋值
this.$refs.cc.childname = "2222222";
// 也可以调用child里面的方法
this.$refs.cc.getState('HELLO')
}
}
})
</script>
</body>
</html>
