Scope component (a)
The contents of the parent component template compilation parent component role in the region; compile content within the template of the sub-components subassembly role.
Sons assembly compiled independently, properties and methods of their use only in scope compile time, e.g., you can not in the parent component template to bind to a property or method instruction subassembly. If you do this console will report a property is undefined error.
If you want to bind a command to control the behavior of sub-components, then you can within the template sub-assemblies , one instruction bound to the property or method subassembly; or within the template parent component will bind command to the property or method of the parent component.
new Vue({
el: '#app-2',
data: {
makeChildShow: true
},
components: {
"component-2-1": {
template: '<span>I am an sub component.</span>',
data: function () {
return {
childIsShow: true
}
}
},
"component-2-2": {
template: '<span v-show="childIsShow">I am an sub component.</span>',
data: function () {
return {
childIsShow: true
}
}
}
}
})<div id="app-2">
<ul>
<li>绑定到子组件属性:<component-2-1 v-show="childIsShow"></component-2-1></li>
<li>绑定到父组件属性:<component-2-1 v-show="makeChildShow"></component-2-1></li>
<li>在子组件模板内将指令绑定到子组件属性:<component-2-2></component-2-2></li>
</ul>
</div>
The first item in the list, due to the parent component attribute can not be found childIsShow, it will not be displayed.
Under the default content distribution
The contents of the parent assembly into sub-assemblies template the way, we called content distribution .
By default, the content of the component is inserted in the parent sub-assembly is not shown.
new Vue({
el: '#app-1',
data: { message: 'I come from parent.' },
components: {
"component-1": {
template: '<p>I am an sub component.</p>',
}
}
})<div id="app-1" class="demo">
<component-1>
{{ message }}
</component-1>
</div>Content distribution fails, messageit will not be displayed.
Single jack
If you want to use content distribution, the parent component content into the template sub-assembly, must be marked in a template sub-assemblies <slot>备选内容</slot>, parent component will find this <slot>备选内容</slot>mark, and replace their own content <slot>备选内容</slot>.
If the parent component does not have to be content distribution, 备选内容becomes the result of the final rendering.
new Vue({
el: '#app-3',
components: {
"component-3": {
template: '\
<ul>\
<li>子组件内容</li>\
<li>子组件内容</li>\
<slot><li>插口备选内容</li></slot>\
<li>子组件内容</li>\
<li>子组件内容</li>\
</ul>'
}
}
})<div id="app-3">
<h5>父组件标题</h5>
<component-3>
<li>父组件插入内容</li>
</component-3>
</div>
Named jack (multiple sockets)
Single-socket models do content distribution, content only to fall into the sub-set is inserted into the template has <slot></slot>marked places.
The named socket in the content and sloton both Mark the corresponding content may only be distributed to the corresponding sloton.
Labeled with a content slot="tag"; labeled slotwith<slot name="tag">
new Vue({
el: '#app-4',
components: {
"component-4": {
template: '\
<div>\
<header>\
<slot name="header"></slot>\
</header>\
<article>\
<slot></slot>\
</article>\
<footer>\
<slot name="footer"></slot>\
</footer>\
<section><slot></slot></section>\
</div>'
}
}
})<div id="app-4">
<component-4>
<h5 slot="header">我来组成头部</h5>
<p>没被标记的slot都我插</p>
<div slot="footer">我来组成腿部</div>
</component-4>
</div>Above defines two months unnamed socket, although here displayed correctly, but the console being given that the definition of default socket will not repeat the mistakes expected
Scope component (b)
The named socket, examples of look components scope
new Vue({
el: '#app-7',
methods: {
parentMethod: function () {
console.log("It is the parent's method");
}
},
components:{
"component-7":{
methods:{
childMethod: function(){
console.log("It is the child's method")
}
},
template:"\
<button>\
<slot name='first'></slot>\
<span @click='childMethod'>子组件模板定义部分①|</span>\
<slot name='second'></slot>\
<span @click='childMethod'>子组件模板定义部分②</span>\
</button>"
}
}
})<div id="app-7">
<component-7>
<span slot="first" @click="parentMethod">内容分发部分①|</span>
<span slot="second" @click="parentMethod">内容分发部分②|</span>
</component-7>
</div>
Content distribution parent component part belong to the scope, content distribution section so click the button, it will call the parent component method, output "It is the parent's method".
Sub-assembly sub-components belong to the scope defined templates, click on this section, we will call sub-assembly method, output"It is the child's method"
Jack scope
In the content distribution process, the content may be used to distribute the parent component subassembly defined template <slot>attributes on (i.e. scope attributes defined on the socket). As <slot slotval="值"></slot>in the parent content distribution assembly, you can slot-scope="obj"obtain all the properties defined in the socket, through {{obj.slotval}}it may slot-scopeuse the data internally.
Particular, in <template>the use of the label slot-scope, <template>itself is not displayed on the page, only play a role in the transfer of data media.
new Vue({
el: '#app-5',
components: {
"component-5":{
template: '<div class="child">\
<slot slotvala="a、来自插口作用域上的数据" slotvalb="b、来自插口作用域上的数据"></slot>\
</div>'
}
}
})<div id="app-5">
<component-5>
<!--这里可以是其他标签，但会被渲染到页面，如<div slot-scope="">-->
<template slot-scope="slot_data_obj">
<span>{{slot_data_obj.slotvala}}</span>
<span>{{slot_data_obj.slotvalb}}</span>
</template>
</component-5>
</div>
Since the value of the slot-scope is essentially just a javascript object, it can be performed using deconstructed syntax es6 <slot>property mapping.
Above but also how to write
<template slot-scope="{slotvala,slotvalb}">
<span>{{slotvala}}</span>
<span>{{slotvalb}}</span>
</template>Jack on the scope of application of the list
Socket may only pass data to the content distribution by its own properties, it can also be defined on v-forthe instruction, so that the characteristics are transmitted to the iteration of the content distribution.
new Vue({
el: '#app-6',
components: {
"component-6":{
data:function(){
return {
items: [
{id:1,text:"哪都通快递"},
{id:2,text:"龙虎山天师府"},
{id:3,text:"曜星社"}
]
}
},
template: '\
<ul>\
<slot name="item" v-for="item in items" v-bind:text="item.text" v-bind:id="item.id"></slot>\
</ul>'
}
}
})<div id="app-6">
<component-6>
<li slot="item" slot-scope="{text,id}">
{{ id+"、"+text }}
</li>
</component-6>
</div>The content distribution <li>is inserted slot, and since slotthe v-forinstruction iterates after iteration by slot-scopeacquiring slotproperty on the data.
Inline Templates
When using inline subassembly characteristic - inline-templatewhen the parent element content distribution section is interpreted as the template subassembly, and the subassembly templateproperty also be substituted (the substituent rear part templatefailure), and also belongs to the sub-scopes components.
new Vue({
el:'#app-8',
components:{
'component-8':{
template:'...'//全部被替换
data:function(){
return {
childMsg:'child\'s data'
}
}
}
}
})<div id="app-8">
<component-8 inline-template>
<div>
<p>这些将作为组件自身的模板。</p>
<p>而非父组件透传进来的内容。</p>
<p>子组件数据: {{ childMsg }}</p>
</div>
</component-8>
</div>
"child's data"From the sub-assemblychildMsg
Due to its characteristics, when using inline templates, the most prone to misunderstanding is to confuse scope.