vue: [assembly slot, custom event]

Components component

By Vue.component vue in the ( "name", {...} ); to define the components, ( vue component is actually a custom HTML tags, we can embed a plurality of HTML tags this custom Tags in order to achieve the effect of multiplexing, similar to java objects )
Vue instance object components are reusable, and has a name, the component definitions and Var vm = new Vue ({... }); Similar to all key-value pairs of the form

 Vue.component("ca",{
        props:["url"],
        template:"<a :href='url' >{{url}}</a>"
    });

In the above example, the definition of a component entitled "ca", we can in HTML <body> tag in the <ca> as an HTML tag used, as follows

template is a template that is defined in one or more HTML tags. Using this custom label, the effect is equivalent to using (template) defined template HTML tags
```
<ca v-bind:url="message"></ca>
```
By v-bind: url = "message " to be assembly props: [ "url"], passing parameters, parameters are derived from a subject Vue Data: {Message: " https://cn.vuejs.org/v2 /guide/components.html "} defined parameters so that it can obtain the value of the message in the assembly of the

Assembly slot <slot> </ slot>

Vue.component("name-todo",{// name-todo 组件
    props:["mesg"],
    template:"<div>\
        <h3>{{mesg}}</h3>\
        <slot name='slot-1'></slot>\
        <ul>\
            <slot name='slot-2'></slot>\
        </ul>\
    </div>"
});
//
// define a plurality of components may be;< Slot > </ slot > slot, as a placeholder, is identified by a distinguished name attribute, be replaced by slot assembly, using the attribute slot in the element tag = "slot-1", a reference slot names, Alternatively the assembly to represent the current slot position 
Vue.component ( "TODO-title-name", { 
    the props: [ "title", "title_url"], 
    Template: " < A : the href = 'title_url' > {{} title } </ A > " 
});

Components "name-todo" defines a plurality of HTML tags, while leaving several slots between tags <slot>, when using the <name-todo> </ name-todo> tag

<name-todo :title="message">
     <name-todo-title slot="slot-1" v-bind:title="title" :title_url="my_url"></name-todo-title>
     <name-xxx slot="slot-2" v-bind:title="xxx" :xxx="xxx"></name-todo-title>
</name-todo>

Since the order does not affect the definition of the label to show the effect of the HTML page, only the name of the slot referenced page will change to show

<name-xxx slot = "slot -2" ... represents a tag <name-xxx> is inserted into the custom component name-todo template, the inserted <slot name = "slot-2 "> </ slot> grooves are (is to be <ul> tag that includes a slot position)
If <name-xxx slot = "slot -1", indicates that the tag is inserted into the <slot name = "slot-1 "> </ slot> this slot position

Custom Event content distribution v-on: abc = "method (param)"

Custom Event

Using the v-on in the page tag: abc = "method (param)" a custom event, event name is: abc

In vue, each component is a separate vue example, the page can only be bound vue root object's methods and parameters, methods, components can not bind (binding parameters and components, only custom tags by v-bind: props = "param" use)

Page can show a template component, the template can get passed parameters page (the page can pass parameters to the component). But the plane could not invoke the component method definition
Page can also display data vue root object, but also by v-on: vue root object to bind click events such methods
However, assembly and vue root object can not communicate with each other, namely: in Vue.component can not directly call new Vue () method

So with $ emit assembly method

By using in the assembly: . The this $ EMIT ( "abc", this.index) , which can call custom event page in the " abc "
Custom events can be bound to a root object method vue
This root object by invoking methods vue $ EMIT indirectly in the assembly
$ Emit ---- ---- call> Custom Event "abc" ----- binding ---> vue root object methods

Example:

< Body > 
    < div ID = "App" > 
        < span : mesg = "Message" > {{Message}} </ span > 
        < name-TODO-TIEMS V-for = "(Arg, index) in args" : Arg = "Arg" : index = "index"  
            V-ON: ABC = "removeArgs (index)" > </ name-TODO-TIEMS > 
            <-! V-ON: ABC = "removeArgs (index)": this is the way to write event bindings, conventional event binding wording is: v-on: click = " method (xxx)" 
                   Customizing an event name is: abc, this is bound to removeArgs method ->
    </div>
</body>

<Script> 
Vue.component ( "TODO-TIEMS-name" , { 
    The props: [ "Arg", "index" ], 
    Template: "<UL> <Li> {{}} --- Arg <= the Click Button @ 'remove'> delete </ the button> </ li> </ ul> " , 
    methods: { 
        // within the component definition click the delete button, call the method 'the Remove' 
        the Remove: function () { 
             // use $ emit () method to call the event defined in the HTML page, the event name is abc, abc this event bound removeArgs method vue root object of 
            the this $ EMIT ( "abc",. the this .index) 
         } 
    } 
}); 
var vm = new new Vue ({ 
    EL:"#app",
    data:{
        message: "An ordinary information" , 
        args: [ "Video", "sound medicine", "live" ], 
    }, 
    Methods: { 
        // delete the data to find ways to call this method in the assembly, the method can be real in source data 
        removeArgs: function (index) { 
            the console.log ( "deleted" + the this .args [index] + "element, the OK" );
             the this .args.splice (index,. 1 ); 
        } 
    } 
});
 < / script>

Reference: https://cn.vuejs.org/v2/guide/components.html

vue: [assembly slot, custom event]

Components component

Assembly slot <slot> </ slot>

Custom Event content distribution v-on: abc = "method (param)"

Custom Event

In vue, each component is a separate vue example, the page can only be bound vue root object's methods and parameters, methods, components can not bind (binding parameters and components, only custom tags by v-bind: props = "param" use)

Guess you like