组件的作用域(一)
父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。
父子组件的编译相互独立，编译时只能使用各自作用域中的属性和方法，例如，你不可以在父组件模板内，将一个指令绑定到子组件的属性或方法上。如果这么做控制台会报一个属性未定义的错误。
如果想要绑定一个指令以便控制子组件的行为，那么你可以在子组件的模板内，将一个指令绑定到子组件的属性或方法上；或者在父组件的模板内，将指令绑定到父组件的属性或方法上。
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>
列表第一项，由于父组件找不到属性childIsShow，将不会显示。
默认情况下的内容分发
将父组件的内容插入子组件模板的方式，我们称为内容分发。
默认情况下，在子组件中插入的父组件内容是不显示的。
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>内容分发失败，message不会显示。
单个插口
如果想使用内容分发，将父组件内容插入到子组件的模板中，必须在子组件的模板内标记一个<slot>备选内容</slot>，父组件将找到这个<slot>备选内容</slot>标记，并将自己的内容替换<slot>备选内容</slot>。
如果父组件没有待分发的内容，备选内容成为最终渲染的结果。
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>
具名插口（多个插口）
单插口模式做内容分发，只能一股脑把套入子模板的内容插入到有<slot></slot>标记的地方。
而具名插口在内容和slot上都做上标记，对应的内容只能分发到对应的slot上。
标记内容用slot="tag"； 标记slot用 <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>以上定义了两个个不具名的插口，虽然这里显示正确，但是控制台报错，说定义重复的默认插口会有不预期的错误
组件作用域（二）
根据具名插口，再来看个组件作用域的例子
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>
内容分发部分属于父组件作用域，因此点击按钮的内容分发部分，会调用父组件方法，输出"It is the parent‘s method"。
子组件模板定义属于子组件作用域，点击这个部分，会调用子组件方法，输出"It is the child‘s method"
插口作用域
在内容分发的过程中，父组件分发的内容可以使用定义在子组件模板<slot>上的属性（即插口作用域上定义的属性）。如<slot slotval="值"></slot>，在父组件分发内容上，可以通过slot-scope="obj"获取到所有在插口上定义的属性，通过{{obj.slotval}}就可以在slot-scope内部使用这个数据。
特殊的，在<template>标签中使用slot-scope，<template>自身是不会在页面上显示，只起到传递数据媒介的作用。
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>
由于slot-scope的值本质上只是个javascript对象，因此可以使用es6的解构语法进行<slot>属性的映射。
以上又可以怎么写
<template slot-scope="{slotvala,slotvalb}">
<span>{{slotvala}}</span>
<span>{{slotvalb}}</span>
</template>插口作用域应用在列表上
插口不仅可以通过自身属性传递数据给分发的内容，还可以在其上定义v-for指令，从而将迭代的特性也传递给分发的内容。
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>内容分发中的<li>被插入slot中，并且因为slot中的v-for指令而进行迭代，迭代之后通过slot-scope获取slot上的属性数据。
内联模板
当使用子组件的内联特性——inline-template时，父组件的内容分发部分就被解释为子组件的模板，而子组件的template属性也将被这个部分取代（取代后template失效），并且作用域也属于子组件。
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"来自子组件的childMsg
由于其特点，在使用内联模板时，最容易产生的误区就是混淆作用域。
原文地址：https://www.cnblogs.com/baimeishaoxia/p/11970616.html