Happy Vue.js Components

Vue.js components

Components are one of the most powerful features of Vue.js.

Components can extend HTML elements, encapsulating reusable code.

The component system allows us to use independent reusable small components to build large-scale applications. The interface of almost any type of application can be abstracted into a component tree:

The syntax for registering a global component is as follows:

Vue.component(tagName, options)

tagName is the component name, and options is the configuration option. Once registered, we can call the component using:

<tagName></tagName>

global component

All instances can use global components.

global component instance

Register a simple global component kxdang, and use it:

<div id="app">
    <kxdang></kxdang>
</div>
 
<script>
// 注册
Vue.component('kxdang', {
  template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

local components

We can also register local components in the instance options, so that the component can only be used in this instance:

local component instance

Register a simple local component kxdang and use it:

<div id="app">
    <kxdang></kxdang>
</div>
 
<script>
var Child = {
  template: '<h1>自定义组件!</h1>'
}
 
// 创建根实例
new Vue({
  el: '#app',
  components: {
    // <kxdang> 将只在父模板可用
    'kxdang': Child
  }
})
</script>

---

Prop

prop is a custom attribute used by child components to receive data passed from parent components.

The data of the parent component needs to pass the data to the child component through props, and the child component needs to explicitly declare "prop" with the props option:

Prop instance

<div id="app">
    <child message="hello!"></child>
</div>
 
<script>
// 注册
Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 同样也可以在 vm 实例中像 "this.message" 这样使用
  template: '<span>{
   
   { message }}</span>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

Dynamic Prop

Similar to using v-bind to bind HTML attributes to an expression, you can also use v-bind to dynamically bind the value of props to the data of the parent component. Whenever the data of the parent component changes, the change is also propagated to the child component:

Prop instance

<div id="app">
    <div>
      <input v-model="parentMsg">
      <br>
      <child v-bind:message="parentMsg"></child>
    </div>
</div>
 
<script>
// 注册
Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 同样也可以在 vm 实例中像 "this.message" 这样使用
  template: '<span>{
   
   { message }}</span>'
})
// 创建根实例
new Vue({
  el: '#app',
  data: {
    parentMsg: '父组件内容'
  }
})
</script>

The following example uses the v-bind directive to pass the todo to each repeated component:

Prop instance

<div id="app">
    <ol>
    <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
      </ol>
</div>
 
<script>
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{
   
   { todo.text }}</li>'
})
new Vue({
  el: '#app',
  data: {
    sites: [
      { text: 'Runoob' },
      { text: 'Google' },
      { text: 'Taobao' }
    ]
  }
})
</script>

Note: props are one-way bound: when a parent component's property changes, it will be propagated to the child component, but not the other way around.

Prop Validation

Components can specify validation requirements for props.

To customize how props are validated, you can provide props values ​​with an object with validation requirements instead of an array of strings. For example:

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

Vue (in the development build) will generate a console warning when prop validation fails.

type can be one of the following native constructors:

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

type can also be a custom constructor, detected using instanceof.