How to use Vue.js components

This time I will bring you the method of using Vue.js components, what are the precautions when using Vue.js components, the following is a practical case, let's take a look.

　1. All Vue components are also Vue instances, divided into global components and local components. The registration method is as follows.

2fb1ec095997abb5abb99340125c8b3b
    b98f2d1b8b5d79f8c1b053de334aa7b583153a5025b2246e72401680bb5dd683
    6520631531c208a38051e59cee36c27853b801b01e70268453ed301cb998e90c94b3e26ee717c64999d7867364b1b4a3dbe41635306b450881218e857817dde0
    b98f2d1b8b5d79f8c1b053de334aa7b583153a5025b2246e72401680bb5dd683
    8c69b8c7e69a6890c44e58d7de1f3c9c
    6520631531c208a38051e59cee36c27853b801b01e70268453ed301cb998e90c94b3e26ee717c64999d7867364b1b4a3a95778579e16b0726f139f43cb421b7b2cacc6d41bbb37262a98f745aa00fbf03f1c4e4b6b16bbbd69b2ee476dc4f83aVue.component('my-component', { //全局组件，建议使用短横线分隔式命名组件  template: 'e388a4556c0f65e1904146cc1a846beeA custom component!94b3e26ee717c64999d7867364b1b4a3'})var Child = {
    template: 'e388a4556c0f65e1904146cc1a846beeA child component!94b3e26ee717c64999d7867364b1b4a3'}var app = new Vue({
    el: '#app',    
    components: { //局部组件，仅可在父作用域#app中使用
    'child-component':Child
    }　　
})var example = new Vue({
    el:'#example'})2cacc6d41bbb37262a98f745aa00fbf0

　Note:

　a. Elements with restricted parent-child elements such as ff6d136ddc5fdfeffaf53ff6ee95f185, f5d188ed2c074f8b944552db028f98a1, 25edfb22a4f469ecb59f1190150159c6, a34de1251f0d9fe1e645927f19a896e8, etc. , the component template cannot be used directly, and can be specified by the is attribute, such as aefc3baf03de7c3c7ca7059834a76d2bfd273fcf5bcad3dfdad3c41bd81ad3e5. There are no such restrictions if you use a stringtemplate (a string literal that allows embedded expressions) from one of the following sources:

　1) 504a63905e80b0689d69a3a31c4d4555

　2) JavaScript Inline template string: 　　

Vue.component('component1',{
    　　　　　　template: &#39;<tr><td>child component</td></tr>&#39;
　　　　});
　　　　Vue.component(&#39;component2&#39;,{
    　　　　　　template: &#39;<table><component1></component1></table>&#39;
　　　　});

　3) .vue Component

b. The data in the component instance must be a function, otherwise a reference to the same object will be returned for each component instance

2. Use of parent-child component combination

a. Parent component passes data to child component

　1) In the child component, the expected data is declared by props.

　　2) It is a one-way data flow, and subcomponents cannot directly modify props.

3) If you want to set prop type verification, you cannot use a string array and should define: Set this attribute="true" in .

b. Child component triggers parent component event

1) Use

$on(eventName)

to listen for events and $emit(eventName,optionalPayload) trigger event. 　　2) Combined with the defined empty instance, communication between non-parent and child components can also be allowed.

c. Parent-child component data combination - using slot

1) Set 58cb293b8600657fad49ec2c8d37b472 in the child component, the parent component can distribute content to the default slot or specify slot="slotName" .

　　2) Set slot-scope="props" in the parent component to obtain the attributes of the slot tag of the child component.

3) It should be noted that the content of the parent component template is compiled in the parent component scope; the content of the child component template is compiled in the child component scope.

　3. Others

　a. Through v-bind:is = "componentObject", components can be switched dynamically. To cache the cut-out component, add a parent element 7c9485ff8c3cba5ae9343ed63c2dc3f7 to it.

b. Set ref="xx" in the child component, and the child component can be operated by child = vm.$refs.xx. -- Just an emergency measure.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use JavaScript strings

How to implement two-way data binding in WeChat applet

The above is the detailed content of How to use Vue.js components. For more information, please follow other related articles on the PHP Chinese website!