Vue2.x之组件使用注意点

最新推荐文章于 2025-07-24 09:30:00 发布

原创最新推荐文章于 2025-07-24 09:30:00 发布 · 427 阅读

0 ·

CC 4.0 BY-SA版权

vue.js 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了Vue.js中组件的正确使用方式，包括利用is属性解决DOM结构问题、子组件data属性的定义方法以及ref属性的使用技巧。通过具体实例展示了如何在Vue应用中实现计数器组件间的互动及数据同步。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件使用注意点</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
    <table>
        <tbody>
            //使用is解决bug
            <tr is="row"></tr>
            <tr is="row"></tr>
            <tr is="row"></tr>
        </tbody>
    </table>
</div>
<script>
    Vue.component('row',{
        template:'<tr><td>this is a row</td></tr>'
    });
    let vm = new Vue({
        el:'#root'
    })
</script>
</body>
</html>

使用is作为html5规范的践行
子组件中的data必须是函数，并且要有返回值。在根组件data可以为对象
ref的使用：在标签上使用获得的是dom元素，在组件上使用获取的是组件本身

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>counter</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
    <counter ref='one' @change="handleCounterClick"></counter>
    <counter ref='two' @change="handleCounterClick"></counter>
    <div>{{ total }}</div>
</div>
<script>
    Vue.component('counter', {
        template: '<div @click="handleClick">{{ number }}</span>',
        data() {
            return {
                number: 0
            }
        },
        methods: {
            handleClick: function () {
                this.number++;
                this.$emit('change')
            }
        }
    });
    let vm = new Vue({
        el: '#root',
        data: {
            total: 0
        },
        methods: {
            handleCounterClick: function () {
                this.total = this.$refs.one.number + this.$refs.two.number
            }
        }
    })
</script>
</body>
</html>