zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    Spring-12-spring整合Mybatis
    Spring-11-AOP面向切面编程
    jQuery选择器之表单元素选择器
    phpsmarty分配变量
    angular
    ajax 第四步
    ajax第三步
    php+ajax+jq
    二十三种设计模式[4]
    二十三种设计模式[3]
  • 原文地址:https://www.cnblogs.com/wzndkj/p/9644389.html
Copyright © 2011-2022 走看看