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)
}
}
})本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-9-15，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录