深入了解 Vue 组件(一)

组件使用中的细节点

因为浏览器的规范，所以有些自定义组件在解析时会出现问题，这时候就需要使用 is 标签来解决

<table>
  <tbody>
    <tr is="row"></tr>
    <tr is="row"></tr>
    <tr is="row"></tr>
  </tbody>
</table>

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

子组件的 data 定义要求必须是一个函数,目的是为了让每个子组件都拥有一个独立的数据存储，这样子组件不会互相影响

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

有些时候我们不得不操作 DOM 这时候就需要使用 ref 来解决问题了

<counter ref="one" @change="handleChange"></counter> //绑定一个ref
<counter ref="two" @change="handleChange"></counter>
<div>{{total}}</div> //求和

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: '#root',
  data: {
    total: 0
  },
  methods: {
    handleChange: function() { //通过ref来获取组件中的数据
      this.total = this.$refs.one.number + this.$refs.two.number;
    }
  }
})

父子组件传值

单向数据流，父组件可以随意向子组件传递参数，但子组件不可以修改传递过来的参数。这样做的原因是考虑到接受的数据可能还被其他子组件使用，会对其他组件造成影响。所以在子组件中我们要把父组件传过来的值复制一份，这样我们就可以随意的进行操作了

<counter :count="3" @change="handleIncrease"></counter>
<counter :count="2" @change="handleIncrease"></counter>
<div>{{total}}</div>

var counter = {
  props: ['count'],
  data: function() {
    return {
      number: this.count
    }
  },
  template: '<div @click="handleClick">{{number}}</div>',
  methods: {
    handleClick: function() {
      this.number++
      this.$emit('change', 1)
    }
  }
}

var vm = new Vue({
  el: '#root',
  data: {
    total: 5
  },
  components: {
    counter: counter
  },
  methods: {
    handleIncrease: function(step) {
      this.total += step
    }
  }
})

深入了解 Vue 组件(一)

组件使用中的细节点

父子组件传值

猜你喜欢