VUE入门到实战--Vue组件细节问题

最新推荐文章于 2022-12-09 15:35:00 发布

taopoppy

最新推荐文章于 2022-12-09 15:35:00 发布

阅读量207

点赞数 1

分类专栏：进阶的Vue 文章标签： is解决模板标签中的bug 子组件data的书写方式 ref的使用

本文链接：https://blog.csdn.net/weixin_37968345/article/details/82998988

版权

进阶的Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、is属性解决模板标签中的bug

1、我们在使用下面的代码的时候，会在浏览器的控制台中发现错误，我们自定义的组件并没有在tbody中，而跑到了外面与table同级的位置，为什么？因为H5标准当中，必须在tbody中放tr标签，所以为了避免这个错误，我们使用is来解决：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>组件使用细节点</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <table>
            <tbody><!--表示这里虽然是tr标签，但实际上是个row的组件-->
                <tr is="row"></tr><tr is="row"></tr><tr is="row"></tr>
            </tbody>
        </table>
    </div>
    <script>
        Vue.component('row',{
            template: "<tr><td>this is row<td></tr>"
        })
        var vm = new Vue({
            el: "#root",
        })
    </script>
</body>
</html>

2、总结：使用is属性解决模板标签上的bug问题：在表格当中我们要注意使用组件直接代替tr的这样的错误，在列表当中也一样，最好使用<li is="row"></li>这样的方式，还有section下面的option。最好也用<option is="row"></option>。

2、子组件中的data书写方式

1、现在我们把上面的代码中的自定义的组件这样写：把td中的内容写在data中的content当中。

Vue.component('row',{
    data: {
        content:"this is row", //错误的写法
    },
    template: "<tr><td>{{content}}<td></tr>"
})

2、上面的这种方式就会报错，会提示data option is not a function。原因是因为：在根组件中以对象的方式去写data是没有问题的，但是非根组件的data必须是个function，而且必须要返回对象，对象中包含着数据。所以正确的写法如下：这样的写法的理由是什么？因为根组件只会被调用一次，而子组件，如下例会被调用三次，而我们希望每个子组件拥有自己的独立的数据，而不是共享一个数据，所以以function的方法，每次都返回一个新的对象作为子组件独立的数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>组件使用细节点</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <table>
            <tbody>
                <tr is="row"></tr><tr is="row"></tr><tr is="row"></tr>
            </tbody>
        </table>
    </div>
    <script>
        Vue.component('row',{
            data:function() {//以function的方式去写子组件的数据，返回对象，对象中包含数据
                return {
                    content:"this is row",
                }
            },
            template: "<tr><td>{{content}}</td></tr>"
        })
        var vm = new Vue({
            el: "#root",
        })
    </script>
</body>
</html>

3、Vue中的ref

1、Vue不建议我们去操作DOM,但是在有些负责的动画效果中不去操作DOM还真就不行，所以Vue中怎么操作DOM？通过使用ref来获取元素去操作DOM.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ref</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <!--给这个div的ref取名为hello，实际上也是div的引用名-->
        <div ref='hello' 
            @click="handleClick"
        >hello world</div>
    </div>
    <script>
        var vm = new Vue({
            el: "#root",
            data: {},
            methods: {
                handleClick: function() {
                    //通过this.$refs.hello拿到的就是真正的DOM结点
                    alert(this.$refs.hello.innerHTML);
                }
            }
        })
    </script>
</body>
</html>

2、那么问题又来了，现在我们是在html标签中添加的ref，获得的是真正的DOM元素，那么我们在组件上使用ref得到的是什么？

答案是：在子组件上添加ref，使用ref得到的是这个子组件的引用，在子组件上有很多实例属性，还有很多数据，都能通过ref去获取，下面展示的就是一个通过ref去获取子组件中数据的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>the ref of component</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <counter @change="addCounter" ref="oneAdder"></counter>
        <counter @change="addCounter" ref="twoAdder"></counter>
        <div>{{total}}</div>
    </div>
    <script>
        Vue.component('counter',{
            template:"<div @click='handleClick'>{{number}}</div>",
            data:function() {
                return {
                    number:0,
                }
            },
            methods:{
                handleClick: function() {
                    this.number++;
                    this.$emit('change');
                }
            }
        })
        var vm = new Vue({
            el: "#root",
            data: {
                total: 0,
            },
            methods:{
                addCounter:function() {
                    this.total=this.$refs.oneAdder.number+this.$refs.twoAdder.number;
                }
            },
        })
    </script>
</body>
</html>

taopoppy

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE入门到实战--Vue组件细节问题

1、is属性解决模板标签中的bug1、我们在使用下面的代码的时候，会在浏览器的控制台中发现错误，我们自定义的组件并没有在tbody中，而跑到了外面与table同级的位置，为什么？因为H5标准当中，必须在tbody中放tr标签，所以为了避免这个错误，我们使用is来解决：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; ...
复制链接

扫一扫

专栏目录