vue入门基础详解之组件元素不对应以及ref用法

在我们使用table时候,table的结构是table>tbody>tr>td,但是我们之间在table下面定义一个包含详情的组件,在table下使用多个会出现,只显示组件内容,而这个table没有将组件包含!

先看一下下面代码

<div id="app">
    <table>
        <row></row>
        <row></row>
    </table>
</div>

row是组件代码,但是由于table下面是不符合w3c规则,不能渲染在里面,就是不能按照你的结构进行渲染,具体效果看下图

发现tr没有包括在table里面,那么这些问题该如何处理呢?我们可以直接使用tr标签,使用is属性等于定义的组件

解决代码

<tr is="row"></tr>
<tr is="row"></tr>

ref用法

<count ref="one" @dj="alert"></count>
<count  ref="two" @dj="alert"></count>
<p>{{total}}</p>

点击组件下面显示点击总数

//定义的组件
Vue.component('count',{
    template:`<p @click="add">{{num}}</p>`,
    data:function () {
        return{
            num:0
        }
    },
    methods:{
        add:function () {
            this.num ++;
            this.$emit('dj',this.num);
        }
    }
})
//在实例中可以调用这个ref,指定的ref名字下存在子组件的data属性
var app=new Vue({
    el:"#app",
    data:{
        msg:"hello",
        total:0
    },
    methods:{
        alert:function (data) {
            //refs是一个对象,引用不同的组件
            this.total=this.$refs.one.num+this.$refs.two.num;
            console.log(data)
        }
    }
})

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏非著名程序员

android:descendantFocusability用法简析

导语 由于今天比较忙,今天就来介绍一下,我之前在博客中写过的东西吧,今天我们就来介绍一下android:descendantFocusability这个属性。...

2105
来自专栏angularejs学习篇

asp.net中ScriptManager自带Ajax与jQuery事件冲突

问题引诉:最近在使用asp.net自带的无刷新提交ScriptManager时,发现一个问题,就是和我自己用jQuery写的一些事件函数和局部刷新相冲突。通过在...

931
来自专栏Web 开发

getBoundingClientRect

今天fix一个拖拽库的IE8bug,发现DOM元素有一个getBoundingClientRect的方法。

1100
来自专栏较真的前端

Vue相关的前端面试题,每道题都很经典~

5K3
来自专栏抠抠空间

html基础

HTML简介 超文本标记语言(Hypertext Markup Language, HTML)是一种用于创建网页的标记语言。 本质上是浏览器可识别的规则,我们按...

40911
来自专栏陈仁松博客

UWP基础教程 - XAML依赖属性和附加属性

前面两章介绍了XAML的命名空间、元素和属性的概念,从本篇开始接下来会介绍XAML的高级特性,本篇主要会介绍两个概念: 依赖属性(Dependency Prop...

3465
来自专栏数据小魔方

动态图表系列6|列表框(offset函数)

今天跟大家分享动态图表系列6——列表框(offset函数)! 具体步骤与前一篇相同: 插入列表框制作选择菜单; 使用offset函数返回动态数据源; 插入图表。...

3245
来自专栏xingoo, 一个梦想做发明家的程序员

用vc++做滚动条控件

  首先用应用向导产生一名为scro的基于对话框的应用,再利用对话框编辑器加入两个一样的水平滚动条,两个滚动条的id分别取idc—scr1和idc—scr2,结...

1947
来自专栏coding

vue.js组件初探

一个页面的ui可以切割成由不同的组件构成,这些组件毕竟独立,这样拆分的好处在于可以做到如同堆积木般快速将页面搭建及重构

912
来自专栏有趣的django

17.HTML

HTML简介 htyper text markup language  即超文本标记语言。 超文本: 就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素...

8346

扫码关注云+社区

领取腾讯云代金券