vuejs使用组件的细节点

is属性

<div id='root'>
　　<table>
　　　　<tbody>
　　　　　　<row></row>
　　　　　　<row></row>
　　　　　　<row></row>
　　　　</tbody>
　　</table>
</div>

<script>
Vue.component('row',{
　　template:'<tr><td>th<row></row>is is a row</td></tr>'
})
var vm = new Vue({
　　el:'#root'
})
</script>

平时我们把tr作为子组件，这个时候在渲染的时候出现了问题，tbody里面必须放tr标签，现在变成row，解析失败，这个时候要怎么解呢？

这个时候可以使用vue的is属性，必须放tr，那就tr，但可以将tr等同于某个组件

<tbody>
　　<tr is='row'></tr>
　　<tr is='row'></tr>
　　<tr is='row'></tr>
</tbody>

这样就可以了，select-option，ul-li也是同样的解决方法

子组件定义的问题

Vue.component('row',{
    data:{
        content:'this is row'
    },
    template:'<tr><td>{{content}}</td></tr>'
})

在vue中子组件这样调用可不可以，其实是不可以的，会报错，必须是function，因为子组件不像父组件一样只被调用一次，会被调用多次，data数据是不同的，不允许共享

Vue.component('row',{
　　data:function(){
　　　　return{
　　　　　　content:'this is row'
　　　　}
　　},
　　template:'<tr><td>{{content}}</td></tr>'
})

所以最终要这样写

用ref操作dom

在vue里面我们不推荐操作dom,但在有些特别复杂的情况，我们还真就得操作dom

eg:获取dom内容

<div id='root'>
　　<div
　　　　ref='hello'
　　　　@click='handleClick'
　　>
　　　　hello world
　　</div>
</div>


<script>
var vm = new Vue({
　　el:'#root',
　　methods:{
　　　　handleClick:function(){
　　　　　　console.log(this.$refs.hello.innerHTML)
　　　　}
　　}
})
</script>

eg:做一个计数器的功能

<div id='root'>
　　<counter ref='one' @change='handleChange'></counter>
　　<counter ref='two' @change='handleChange'></counter>
　　<div>{{total}}</div>
</div>

<script>
Vue.component('counter',{
　　data:function(){
　　　　return {
　　　　　　number:0
　　　　}
　　},
　　template:'<div @click="handleClick">{{number}}</div>',
　　methods:{
　　　　handleClick:function(){
　　　　　　this.number ++;
　　　　　　this.$emit('change',this.number)
　　　　}
　　}
})
var vm = new Vue({
　　el:'#root',
　　data:{
　　　　total:0
　　},
　　methods:{
　　　　handleChange:function(){
　　　　　　this.total = this.$refs.one.number + this.$refs.two.number;
　　　　}
　　}
})
</script>

vuejs使用组件的细节点

猜你喜欢