深入了解 Vue 组件(二)

版权声明：转载请注明出处 https://blog.csdn.net/SOALIN228/article/details/84846198

组件参数校验

可以通过 type 来指定子组件接收的参数类型，当指定参数为数字时要给 content 加上 : ,并指定 type 为 Number ，否则接受到的是字符串。 required 可以指定是否必须传参数，当没有传递参数时使用 default 的值，可以在 validator 进行自定义的校验，本例定义传递的参数长度必须大于 5 位

<child content="hello world"></child>

Vue.component('child', {
  props: {
    content: {
      type: String,
      required: false,
      default: 'default value',
      validator: function(value) {
        return (value.length > 5)
      }
    }
  },
  template: '<div>{{content}}</div>'
})

---

给组件绑定原生事件

给 click 后加上 native 表示监听是原生的事件

<child @click.native="handleClick"></child>

Vue.component('child', {
  template: '<div>Child</div>'
})

var vm = new Vue({
  el: '#root',
  methods: {
    handleClick: function() {
      alert('click')
    }
  }
})