组件使用细节点:

‘is’ 的用处

SRE实战 互联网时代守护先锋,助力企业售后服务体系运筹帷幄!一键直达领取阿里云限量特价优惠。

当我们使用Vue.component一个组件的时候、

有时候直接用会出代码上的bug

<table>
 <tbody>
	<!--这样才能符合HTML的,解决模板标签上出现bug的问题-->
	<tr is="row"></tr>
	<tr is="row"></tr>
	<tr is="row" ref="hhh"></tr>
 </tbody>
</table>

Vue.component("row",{
//在非根实例下定义的data必须是一个函数,每个组件的值都独立存在
data:function(){
return{
content:"this is a row"
}

},
template:`<tr><td>{{content}}</td></tr>`

})


  

 

 

使用Vue在一般通过操作数据的方式来控制视图

但是在某些情况下,要操作dom

在节点上添加   ref=“xxx”

找到 用   this.$ref.xxx

  <counter @change="hand1"  ref="one"></counter>
  <counter @change="hand1" ref="two"></counter>
  <div >{{total}}</div>

js:
methods:{
hand1:function(){
this.total=this.$refs.one+this.$ref.two
}
}

  

扫码关注我们
微信号:SRE实战
拒绝背锅 运筹帷幄