VUE is ref 和 $refs
2018-08-31 本文已影响0人
楼下小黑666
is关键字
先看一段代码
......
<body>
<div id = "app">
<table>
<tbody>
<row></row>
<row></row>
<row></row>
</tbody>
</table>
</div>
<script>
Vue.component('row',{
template: "<tr><td>hello world</td></tr>",
})
var vm = new Vue({
el: "#app"
})
</script>
</body>
......
图片.png
看展示的源码发现一个问题：hello world 代码中定义在表格内的，实际上显示在表格外面了
原因是：HTML规范中table和tbody标签下，必须有tr标签，模板中定义的row标签不会被识别，就移外面去了。要想解决这个bug，就得用is用is关键字，给tr标签映射一个对应的组件，这样VUE在解析的时候，就会用组件中模板标签来替换对应标签:
修改代码后：
.....
<body>
<div id = "app">
<table>
<tbody>
<!-- 用is关键字来映射这个标签到一个组件 -->
<tr is = "row"></tr>
<tr is = "row"></tr>
<tr is = "row"></tr>
</tbody>
</table>
</div>
<script>
Vue.component('row',{
template: "<tr><td>hello world</td></tr>",
})
var vm = new Vue({
el: "#app"
})
</script>
</body>
......
图片.png
这就是is关键字的作用，我的理解是将html标签映射到一个组件，（字面上理解，就是这个标签‘是’这个组件）然后用组件来替换
ref 和 $refs
VUE通过数据绑定来改变页面上的展示，并不推荐操作dom，但在实际开发中，我们可能还是有操作dom的情况，这个时候ref就派上用场了
ref: 用来给元素和子组件注册引用信息
$$refs: 表示一个VUE对象注册的所有引用的集合，在对象中，通过this.$refs.ref就访问到了这个组件
ref用在dom上就表示这个节点，用在组件上，就表示这个组件
获取dom
<body>
<div id = "app">
<div ref = "total" @click="handleChange">total: {{total}}</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data:{
total:0
},
methods:{
handleChange: function(){
console.log(this.$refs.total);
console.log(typeof(this.$refs.total));
}
}
})
</script>
</body>
图片.png
点击元素获取到了这个dom节点，这个节点是一个对象
下面的例子父组件，通过调用ref来获取到子组件当中的引用，来实现点击一下子组件，父组件值加一的逻辑
......
<body>
<div id = "app">
<counter ref= 'number1' @click = "handleChange"></counter>
<counter ref= 'number2' @click = "handleChange"></counter>
<div>total: {{total}}</div>
</div>
<script>
Vue.component('counter',{
template: "<div @click = 'handleClick'>number: {{number}}</div>",
// 子组件中，data要返回一个对象，这是因为子组件大多都是公用的，
// 里面的数据其实是变化的，在对象中定义返回内容，可以增加灵活性
data: function(){
return {
number:0
}
},
methods: {
handleClick: function (){
this.number ++;
this.$emit('click')
}
}
})
var vm = new Vue({
el: "#app",
data:{
total:0
},
methods:{
handleChange: function(){
this.total = this.$refs.number1.number + this.$refs.number2.number;
}
}
})
</script>
</body>
......
