美文网首页
VUE is ref 和 $refs

VUE is ref 和 $refs

作者: 楼下小黑666 | 来源:发表于2018-08-31 17:17 被阅读0次

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>
......

相关文章

  • VUE is ref 和 $refs

    is关键字 先看一段代码 看展示的源码发现一个问题:hello world 代码中定义在表格内的,实际上显示在表格...

  • vue ref 和 refs

    起因是要用到element 里面table的方法 想用其中的clearFilter(),却不知道怎么调用,查了一下...

  • Vue - ref和$refs用法

  • Vue中获取dom元素之ref

    ref Vue中可以通过ref属性绑定Dom元素,通过this.$refs获取页面中的Dom元素 例:

  • this.$refs 用于 vue 获取 dom元素

    vue $refs 基本用法:返回 一个 对象 ,包括注册过 【ref 特性】的 所有dom元素 和 组件实例。 ...

  • 【Vue2】组件传值的六种方法

    Vue 组件之间的通信大概归类为: 父子组件通信: props/$emit;ref/refs;$attrs / $...

  • vue中的 ref 和 $refs

    你应该学过jquery吧,没用vue之前,我前端框架是用JS+Jquery+Bootstrap,因为不是数据驱动,...

  • 7.Vue 操作dom

    Vue操作dom: 在Vue中获取dom,需要在dom上使用ref="名称",然后通过:this.$refs.名称...

  • 详解vue中的ref和$refs的使用

    这篇文章主要介绍了vue中的ref和refs的使用,文中通过示例代码介绍的非常详细。 ref:被用来给元素或子组件...

  • vue3 使用$ref

    vue3 使用 $ref ,不是那个$refs 这个当前还是实验性api 主要是解决ref修改值需要.value...

网友评论

      本文标题:VUE is ref 和 $refs

      本文链接:https://www.haomeiwen.com/subject/ohhewftx.html