Vue使用组件的几个注意点

最新推荐文章于 2022-10-28 15:53:53 发布

要不要吃烤肉

最新推荐文章于 2022-10-28 15:53:53 发布

阅读量161

点赞数

分类专栏：前端学习文章标签： vue

本文链接：https://blog.csdn.net/Smart_J_King/article/details/108563884

版权

前端学习专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue使用组件的几个注意点</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- “ is ”的使用，解决h5标签问题 -->
        <!-- 解决使用组件而可能引起一些违反Html5语法的bug, <tbody>里必须写的是<tr>,类似的问题如：
        使用<ol>,<option>标签可能发生的一些问题，此时不能在这些标签里面直接使用自定义组件标签，
        使用“ is ”解决 -->
        <!-- <table>
            <tbody>
                <tr is="row"></tr>
                <tr is="row"></tr>
                <tr is="row"></tr>
            </tbody>
        </table> -->

        <!-- 子组件的data必须是一个函数，通过返回对象的形式形成数据 -->
        <!-- <table>
            <tbody>
                <tr is="row"></tr>
                <tr is="row"></tr>
                <tr is="row"></tr>
            </tbody>
        </table> -->

        <!-- ref的使用 -->
        <!-- <div ref="ref1" @click="handleClick1"> ref(引用) 的使用</div> -->

        <!-- 计数器例子进一步阐述ref -->
        <counter ref="num1" @change="handleCounterChange"></counter>  
        <counter ref="num2" @change="handleCounterChange"></counter>
        <div>{{total}}</div>
    </div>

    <script>
        // Vue.component("row", {
        //     template: "<tr><td>{{content}}</td></tr>",
        //     // 子组件的data必须是一个函数，通过返回对象的形式形成数据
        //     data: function() {
        //         return {
        //             content: "This is content."
        //         }
        //     }
        // })
        Vue.component('counter', {
            template: '<div @click="handleCounterClick">{{num}}</div>',
            data: function() {
                return {
                    num: 0
                }
            },
            methods: {
                handleCounterClick: function() {
                    this.num ++;
                    this.$emit('change');  //向外触发事件，涉及子组件向父组件传值
                }
            }
        })
        var vm = new Vue({
            el: "#root",
            data: {
                total: 0
            },
            methods: {
                handleClick1: function() {
                    // 获取对应DOM元素或者组件的引用
                   alert(this.$refs.ref1.innerHTML)
                },
                handleCounterChange: function() {
                    this.total = this.$refs.num1.num + this.$refs.num2.num;
                }
            }
        })
    </script>
</body>
</html>

要不要吃烤肉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue使用组件的几个注意点

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue使用组件的几个注意点</title> <script src="./vue.js"></.
复制链接

扫一扫