Communication between components that you must learn every day in Vue.js-JS Tutorial-php.cn

What is a component?

Component is one of the most powerful features of Vue.js. Components can extend HTML elements, encapsulating reusable code. At a high level, a component is a custom element to which Vue.js's compiler adds special functionality. In some cases, components can also take the form of native HTML elements, extended with the is attribute.

Use components

Registration

As mentioned before, we can use Vue.extend() to create a component constructor:

var MyComponent = Vue.extend({
 // 选项...
})

Copy after login

To use this constructor as a component, you need to use `Vue.component(tag, constructor)` **Registration**:

// 全局注册组件，tag 为 my-component
Vue.component(&#39;my-component&#39;, MyComponent)

Copy after login

For custom tag names, Vue.js does not enforce W3C rules (lowercase and containing a dash), although it is better to follow this rule.

After the component is registered, it can be used in the module of the parent instance as a custom element . Be sure to register the component before initializing the root instance:

<div id="example">
 <my-component></my-component>
</div>
 
// 定义
var MyComponent = Vue.extend({
 template: &#39;<div>A custom component!</div>&#39;
})
 
// 注册
Vue.component(&#39;my-component&#39;, MyComponent)
 
// 创建根实例
new Vue({
 el: &#39;#example&#39;
})

Copy after login

Renders as:

<div id="example">
 <div>A custom component!</div>
</div>

Copy after login

Note that the component's template replaces the custom element, which only serves as a mounting point. You can use the instance option replace to decide whether to replace.

Local registration

There is no need to register each component globally. You can make the component only used in other components, register with the instance option components:

var Child = Vue.extend({ /* ... */ })
 
var Parent = Vue.extend({
 template: &#39;...&#39;,
 components: {
 // <my-component> 只能用在父组件模板内
 &#39;my-component&#39;: Child
 }
})

Copy after login

This kind of encapsulation is also applicable to other resources, such as instructions and filters. and transition.

Registration syntax sugar

In order to make events simpler, you can directly pass in the option object instead of the constructor to Vue.component() and component options. Vue.js automatically calls Vue.extend() behind the scenes:

// 在一个步骤中扩展与注册
Vue.component(&#39;my-component&#39;, {
 template: &#39;<div>A custom component!</div>&#39;
})
 
// 局部注册也可以这么做
var Parent = Vue.extend({
 components: {
 &#39;my-component&#39;: {
  template: &#39;<div>A custom component!</div>&#39;
 }
 }
})

Copy after login

Component option issues

Most of the options passed into the Vue constructor are also Can be used in Vue.extend(), but there are two special cases: data and el. Imagine if we simply passed an object as the data option to Vue.extend():

var data = { a: 1 }
var MyComponent = Vue.extend({
 data: data
})

Copy after login

The problem with this is that all instances of `MyComponent` will Share the same `data` object! This is basically not what we want, so we should use a function as the `data` option and let this function return a new object:

var MyComponent = Vue.extend({
 data: function () {
 return { a: 1 }
 }
})

Copy after login

Similarly, The `el` option must also be a function when used in `Vue.extend()`.

Template parsing

Vue’s template is a DOM template. Use the browser’s native parser instead of implementing one yourself. DOM templates have some advantages over string templates, but there is also the problem that it must be a valid HTML fragment. Some HTML elements have restrictions on what elements can be placed inside it. Common restrictions:
•a cannot contain other interactive elements (such as buttons, links)
•ul and ol can only directly contain li
•select can only contain option and optgroup
•table only Can directly contain thead, tbody, tfoot, tr, caption, col, colgroup
•tr can only directly contain th and td

In practice, these restrictions will lead to unexpected results. Although it may work in simple cases, you cannot rely on the result of a custom component's expansion before the browser validates it. For example, is not a valid template, even if the my-select component eventually expands to