Vue2.x之组件使用注意点 - 代码天地

Vue2.x之组件使用注意点

其他 2018-06-25 23:38:55 阅读次数: 2

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

猜你喜欢

转载自blog.csdn.net/qq_33733970/article/details/80633271

Vue2.x之组件使用注意点

Vue2.x之插槽的使用

Vue2.x之非父子组件传值

Vue2.x之给组件绑定原生事件

Vue2.x基础（二） —— 组件

Vue2.x之禁用eslint

vue2.x 使用JSX 开发

Vue2.x

Vue2.x之动态组件与v-once指令

使用自己开发的qiucode-ui组件库（基于Vue2.x）

基于Vue2.x的小型移动的组件库

Vue2.x通用编辑组件的封装及应用

Vue2.x通用条件搜索组件的封装及应用

Vue2.x中组件之间的通信

Vue2.x 父子组件之间的相互访问

Vue2.x 源码学习（三） - 组件化（二）

Vue2.x 源码学习（三） - 组件化（一）

实现选项卡组件vue2.x

Vue2.x中，父子组件通信

利用vue2.x、echarts画散点地图

vue-cli(vue2.x)中使用axios

Vue2.x之v-for中:key的作用

Vue2.x之package.json依赖安装

Vue2.x之生命周期详解

Vue2.x 源码剖析之虚拟 DOM

Vue2.x 源码剖析之响应式原理

Vue2.x 项目性能优化之代码优化

Vue2.x 使用webpack设置工程的根目录

Vue2.x之使用vue-video-player时Uncaught TypeError: Cannot read property 'EventTarget' of undefined

vue：vue2.x学习笔记

今日推荐

火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？

北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”

LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍

国产云输入法——仅华为无云端数据上传安全问题

开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40

开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）

开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作

周排行

浏览器对同一域名进行请求的最大并发连接数

React Hook之自定义Hook

【转】MyBatis缓存机制

-Java-泛型

自动化测试常用脚本-发送邮件

LeetCode#859: Buddy Strings

java、Python处理字符串

第二篇の博客

Hadoop伪分布式环境安装

SQL Server进阶（十一）临时表、表变量

每日归档

更多

2024-04-27(56)

2024-04-26(39)

2024-04-25(22)

2024-04-24(36)

2024-04-23(26)

2024-04-22(39)

2024-04-21(0)

2024-04-20(6)

2024-04-19(5)

2024-04-18(0)