13.Vue.js components

Component (Component) Vue.js is one of the most powerful features.

HTML elements that could be extended, the package reusable code.

Components of the system allows us to use a separate reusable widgets to build a large application, almost any type of application interface can be abstracted as a component tree:

Vue.component(tagName, options)

tagName for the component name, options for the configuration options. After registration, we can call the components in the following ways:

<tagName></tagName>

Global Components

All instances can use global components.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<Title> Vue Test Example - novice tutorial (runoob.com) </ title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <runoob></runoob>
</div>

<script>
// Register
Vue.component ( 'runoob', {
  template: '<h1> custom components </ h1>!'
})
// Create a root instance
new view ({
  the '#app'
})
</script>
</body>
</html>

Local assemblies

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

<div id="app">
    <runoob></runoob>
</div>
 
<script>
each child = {
  template: '<h1> custom components </ h1>!'
}
 
// Create a root instance
new view ({
  the '#app'
  components: {
    // <runoob> will only be available in the parent template
    'runoob': Child
  }
})
</script>

Prop

prop parent component is used to pass data to a custom attribute.

Data required by props parent component of the data to the sub-components, sub-assemblies need to explicitly declare with props option "prop":

<div id="app">
    <child message="hello!"></child>
</div>
 
<script>
// Register
Vue.component('child', {
  // declare props
  props: ['message'],
  // The same can also be used as such as "this.message" in vm instances
  template: '<span>{{ message }}</span>'
})
// Create a root instance
new view ({
  the '#app'
})
</script>

Dynamic Prop

HTML attributes with similar binding to a v-bind expression, can be dynamically bound by the value of props v-bind to the data in the parent assembly . Whenever data changes parent element, this change will be conducted to the sub-assembly:

<div id="app">
    <div>
      <input v-model="parentMsg">
      <br>
      <child v-bind:message="parentMsg"></child>
    </div>
</div>
 
<script>
// Register
Vue.component('child', {
  // declare props
  props: ['message'],
  // The same can also be used as such as "this.message" in vm instances
  template: '<span>{{ message }}</span>'
})
// Create a root instance
new view ({
  the '#app'
  data: {
    parentMsg: 'parent element content'
  }
})
</script>

　The following examples will v-bind todo instruction repeated for each of the transmitted component:

<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: [ 'all'],
  template: '<li>{{ todo.text }}</li>'
})
new view ({
  the '#app'
  data: {
    sites: [
      { text: 'Runoob' },
      { text: 'Google' },
      { text: 'Taobao' }
    ]
  }
})
</script>

Note: prop-way binding is: when the attribute change of the parent component, is conducted to the subassembly, but not vice versa.