Custom Event
By prop attribute, data can be transferred to the parent component subassemblies, and custom events subassembly is used inside the data reported to the parent component.
<div id="app3">
<my-component v-on:myclick="onClick"></my-component>
</div>
<script>
Vue.component('my-component', {
template: `<div>
<button type="button" @click="childClick">点击我触发自定义事件</button>
</div>`,
methods: {
childClick () {
this.$emit('myclick', '这是我暴露出去的数据', '这是我暴露出去的数据2')
}
}
})
new Vue({
el: '#app3',
methods: {
onClick () {
console.log(arguments)
}
}
})
</scriptClick the button below to print out the console
As shown above, consists of the following steps:
Subassembly in the custom events and their methods of data necessary to issue the following code sent by
this.$emit('myclick', '这是我暴露出去的数据', '这是我暴露出去的数据2')The first parameter is the name of self-defined events
behind the argument is the turn of the data you want to send out
parent component using the v-on for the event binding processor
<my-component2 v-on:myclick="onClick"></my-component2>Thus, the method Vue instance methods can be passed in the call parameters
Note : When using the v-on binding events approach, should not pass into any arguments, but write directly to v-on: myclick = "onClick ", otherwise, sub-assemblies exposed data will not be able to get
Binding native events
If you want a component of the root element monitor a native events. You can use .native modified v-on
<my-component v-on:click.native="doTheThing"></my-component>Explore the v-model
v-model can achieve two-way data binding form controls, its principle is to use the binding properties and events to achieve. For example, input controls. Without the use of v-model, can be achieved by two-way data binding:
<div id="app4">
<input type="text" v-bind:value="text" v-on:input="changeValue($event.target.value)">
{{text}}
</div>
<script>
new Vue({
el: '#app4',
data: {
text: '444'
},
methods: {
changeValue (value) {
this.text = value
}
}
})
</script>
The above code also achieved two-way data binding. Its essence is this:
- The characteristics of the input value bound to the property text Vue instance, text change, will change the content of input
- A method to form and then input to event handler Vue instance, this approach will change according to the value of the input parameter text` of Vue
- Accordingly, when typing in the input, the input event is triggered, the event.target.value passed to this method, and finally realize the effect of changing the binding data.
The v-model is syntactic sugar on top of this way, that is the wording of the above packages for a moment, to facilitate our use.
Use custom events to create a custom form input components
Understanding of insider v-model, this effect can also be used on a custom form components.
A v-model default event on the component will use the name and value of prop called input, but like radio buttons, check boxes and other types of input controls might value characteristics for different purposes. model option can be used to avoid such conflicts:
<div id="app5">
<base-checkbox v-model="lovingVue"></base-checkbox>
<div>{{lovingVue}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
Vue.component('base-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: Boolean
},
template: `<input type="checkbox" v-bind:checked="checked" v-on:change="$emit('change', $event.target.checked)"> `
})
var vm = new Vue({
el: "#app5",
data: {
lovingVue: false
}
})
</script>LovingVue value here will be passed, called checked the prop. At the same time when
Note that you still need to declare checked in this prop props option components inside.
Dynamic Components
By using the reserved
<div id="app6">
<select v-model="currentComponent">
<option value="home">home</option>
<option value="posts">post</option>
<option value="archive">about</option>
</select>
<component :is="currentComponent"></component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el: '#app6',
data: {
currentComponent: 'home'
},
components: {
home: {
template: `<header>这是home组件</header>`
},
posts: {
template: `<header>这是posts组件</header>`
},
archive: {
template: `<header>这是archive组件</header>`
}
}
})
</script>Retention components switched-out, to avoid re-rendering
If the switched-out assembly remains in memory, or can retain its status to avoid re-rendering. For this purpose, a keep-alive add command parameters:
<!-- 失活的组件将会被缓存！-->
<keep-alive>
<component :is="currentComponent">
</component>
</keep-alive>
Slot
Single slot
Many use the components used above is this:
<component></component>That component is empty, do not place any text or elements. But the native html elements can all be nested, div which put table
or something. Between custom tag assembly may be opened and closed to place the content, but requires the use of slot when defining component.
slot is equivalent to set up a sub-assembly place, If you call it, to between its opening and closing tags put something, put it into the slot in these things.
- When there is no sub-assembly slot, something within parent components on the subassembly label will be discarded;
- The slot label content subassembly may be placed, when the parent component content is not placed in the subassembly tag, the content will be rendered in the slot;
- When the content of the parent assembly is placed in a subassembly tag, the slot contents are discarded
Liezi
<div id="app"> //父组件模板：
<h1>我是父组件的标题</h1>
<my-component>
<p>这是一些初始内容</p>
</my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el: "#app",
data: {},
components: {
'my-component': {
template: `
<div>//子组件的模板
<h2>我是子组件的标题</h2>
<slot>
只有在没有要分发的内容时才会显示。
</slot>
</div> `
}
}
})
</script>Rendering results:
<div>
<h1>我是父组件的标题</h1>
<div>
<h2>我是子组件的标题</h2>
<p>这是一些初始内容</p>
</div>
</div>Named slot
slot can be many. Then the sub-assembly for extra content in the parent component is placed on how to put each slot in it? When the subassembly is to give each a name slot name, parent component placing extra elements, the properties of each slot to the assigned slot of a representative of the name. At that time, the extra content will be based on their slot has a corresponding attribute to look for the name of the slot elements.
Note :
- Sub-components can have an anonymous slot, when the distribution of the extra content not find the corresponding slot, it will enter there
- If the sub-components are not anonymous slot, when the distribution of the extra content not find the corresponding slot, it will be discarded,
For example, suppose we have an app-layout component that template is:
<div id="app">
<app-layout>
<h1 slot="header">这里可能是一个页面标题</h1>
<p>主要内容的一个段落。</p>
<p>另一个主要段落。</p>
<p slot="footer">这里有一些联系信息</p>
</app-layout>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el: "#app",
data: {},
components: {
'my-component': {
template: `
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div> `
}
}
})
</script>Rendering results:
<div class="container">
<header>
<h1>这里可能是一个页面标题</h1>
</header>
<main>
<p>主要内容的一个段落。</p>
<p>另一个主要段落。</p>
</main>
<footer>
<p>这里有一些联系信息</p>
</footer>
</div>Scope slot
Scope slot is a slot slot, but he can pass the data to a specific element to the parent element, then has a parent component to determine how to render the data.
1. First, slot subassembly need to have some characteristics (prop)
Vue.component('my-component4', {
template: `<div>
<slot :text="hello" message="world"></slot>
</div>`,
data () {
return {
hello: [1,'2']
}
}
})2. parent component subassembly at the call, add a template element in it, and this template element having a scope attribute
<div id="app7">
<my-component4>
<template scope="props">
</template>
</my-component4>
</div>Value scope characteristics, on behalf of all the objects pass over the subcomponents of data. Equivalent to
props = {
text: '',
message: ''
}3. Finally, you can render the parent component sub-assemblies pass over the data in the template
<div id="app7">
<my-component4>
<template slot-scope="props">
<span>{{props.text}}</span>
<span>{{props.message}}</span>
</template>
</my-component4>
</div>4.Vue support the scope attribute slot deconstruction. Therefore, the above code can be abbreviated as:
<div id="app7">
<my-component4>
<template slot-scope="{text, message}">
<span>{{text}}</span>
<span>{{message}}</span>
</template>
</my-component4>
</div>Scope slot is the slot, just added more features, then the parent component was more than some treatment.