【每日学习记录】【vue组件】is 解决tr或ul下使用模板的问题

最新推荐文章于 2024-04-29 04:18:12 发布

E_LK

最新推荐文章于 2024-04-29 04:18:12 发布

阅读量316

点赞数

分类专栏：学习记录 # vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_44649913/article/details/109819168

版权

学习记录同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

2020-11-19记录

vue组件

1.is 解决tr或ul下使用模板的问题

<body>
  <div id="app">
    <table>
      <tbody>
        <tr is="row"></tr>
        <tr is="row"></tr>
        <tr is="row"></tr>
      </tbody>
    </table>
  </div>
</body>
<script>
  Vue.component('row',{
    template: '<tr><td>this is a row</td></tr>'
  })
  var vm= new Vue({
    el: '#app'
  })
</script>

第五到七行代码直接写成<row></row>会出现结构错误，ul同理
使用is绑定模板可以解决这个问题

2.子组件中的data必须是一个函数而不能是对象

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

3.ref的使用

ref——引用

<body>
  <div id="app">
    <div ref='hello'
     @click="handleClick"
     >
      hello
    </div>
  </div>
</body>
<script>
  var vm= new Vue({
    el: '#app',
    methods:{
      handleClick: function(){
        console.log(this.$refs.hello.innerHTML)
      }
    }
  })
</script>

4.计数器、父组件对子组件的计数

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

E_LK

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【每日学习记录】【vue组件】is 解决tr或ul下使用模板的问题

2020-11-19记录vue组件is 解决tr或ul下使用模板的问题<body> <div id="app"> <table> <tbody> <tr is="row"></tr> <tr is="row"></tr> <tr is="row"></tr> </tbody> &l
复制链接

扫一扫