前面的话
为了让组件可以组合，需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为 内容分发 (或 “transclusion” )。vue实现了一个内容分发 api，参照了当前 web 组件规范草案，使用特殊的
编译作用域
在深入内容分发 API 之前，先明确内容在哪个作用域里编译。假定模板为
<child-component>
{{ message }}
</child-component>
message 应该绑定到父组件的数据，还是绑定到子组件的数据？答案是父组件。组件作用域简单地说是：父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。
一个常见错误是试图在父组件模板内将一个指令绑定到子组件的属性/方法：
<!-- 无效 --> <child-component></child-component>
假定someChildProperty是子组件的属性，上例不会如预期工作。父组件模板不应该知道子组件的状态
如果要绑定作用域内的指令到一个组件的根节点，应当在组件自己的模板上做：
Vue.component('child-component', {
// 有效，因为是在正确的作用域内
template: '<p>Child</p>',
data: function () {
return {
someChildProperty: true
}
}
})
类似地，分发内容是在父作用域内编译
默认丢弃
一般地，如果子组件模板不包含
var parentNode = {
template: ` <p>
</p><p>父组件</p>
<child>
<p>测试内容</p>
</child>
`,
components: {
'child': childNode
},
};
<p>
<parent></parent></p><script></script><script>var childNode = {
template: ` <p class="child">
<p>子组件
`,
};var parentNode = {
template: ` <p class="parent">
<p>父组件
<child>
<p>测试内容
`,
components: { 'child': childNode
},
};// 创建根实例new Vue({
el: '#example',
components: { 'parent': parentNode
}
})</script>
如下图所示， 测试内容
匿名slot
当子组件模板只有一个没有属性的 slot 时，父组件整个内容片段将插入到 slot 所在的 DOM 位置，并替换掉 slot 标签本身
var childNode = {
template: ` <p>
</p><p>子组件</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/js/1492" title="jQuery纵向tab选项卡内容切换代码"><img
src="https://img.php.cn/upload/jscode/000/000/001/59bf6c816a5ce574.jpg" alt="jQuery纵向tab选项卡内容切换代码" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/js/1492" title="jQuery纵向tab选项卡内容切换代码" class="overflowclass">jQuery纵向tab选项卡内容切换代码</a>
<p class="overflowclass">jQuery纵向tab选项卡内容切换代码</p>
</div>
<a rel="nofollow" href="/xiazai/js/1492" title="jQuery纵向tab选项卡内容切换代码" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<slot></slot>
`,
};
var parentNode = {
template: ` <p>
</p><p>父组件</p>
<child>
<p>测试内容</p>
</child>
`,
components: {
'child': childNode
},
};
如果出现多于1个的匿名slot，vue将报错
var childNode = {
template: ` <p>
</p><p>子组件</p>
<slot></slot>
<slot></slot>
`,
};
【默认值】
最初在
当slot存在默认值，且父元素在
var childNode = {
template: ` <p>
</p><p>子组件</p>
<slot><p>我是默认值</p></slot>
`,
};
var parentNode = {
template: ` <p>
</p><p>父组件</p>
<child></child>
`,
components: {
'child': childNode
},
};
当slot存在默认值，且父元素在
var childNode = {
template: ` <p>
</p><p>子组件</p>
<slot><p>我是默认值</p></slot>
`,
};
var parentNode = {
template: ` <p>
</p><p>父组件</p>
<child>
<p>我是设置值</p>
</child>
`,
components: {
'child': childNode
},
};
具名Slot
元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素
var childNode = {
template: ` <p>
</p><p>子组件</p>
<slot>头部默认值</slot>
<slot>主体默认值</slot>
<slot>尾部默认值</slot>
`,
};
var parentNode = {
template: ` <p>
</p><p>父组件</p>
<child>
<p>我是头部</p>
<p>我是尾部</p>
</child>
`,
components: {
'child': childNode
},
};
仍然可以有一个匿名 slot，它是默认 slot，作为找不到匹配的内容片段的备用插槽。匿名slot只能作为没有slot属性的元素的插槽，有slot属性的元素如果没有配置slot，则会被抛弃
var childNode = {
template: ` <p>
</p><p>子组件</p>
<slot>主体默认值</slot>
<slot></slot>
`,
};
var parentNode = {
template: ` <p>
</p><p>父组件</p>
<child>
<p>我是主体</p>
<p>我是其他内容</p>
<p>我是尾部</p>
</child>
`,
components: {
'child': childNode
},
};
插入 我是其他内容 被丢弃 如果没有默认的 slot，这些找不到匹配的内容片段也将被抛弃
var childNode = {
template: ` <p>
</p><p>子组件</p>
<slot>主体默认值</slot>
var parentNode = {
template: ` <p>
</p><p>父组件</p>
<child>
<p>我是主体</p>
<p>我是其他内容</p>
<p>我是尾部</p>
</child>
`,
components: {
'child': childNode
},
};
我是其他内容
和都被抛弃
作用域插槽
作用域插槽是一种特殊类型的插槽，用作使用一个 (能够传递数据到) 可重用模板替换已渲染元素。
在子组件中，只需将数据传递到插槽，就像将 props 传递给组件一样
<p> <slot></slot></p>
在父级中，具有特殊属性 scope 的 元素必须存在，表示它是作用域插槽的模板。scope 的值对应一个临时变量名，此变量接收从子组件中传递的 props 对象
var childNode = {
template: ` <p>
</p><p>子组件</p>
<slot></slot>
`,
};
var parentNode = {
template: ` <p>
</p><p>父组件</p>
<child>
<template>
<p>hello from parent</p>
<p>{{ props.xxx }}</p>
</template>
</child>
`,
components: {
'child': childNode
},
};
如果渲染以上结果，得到的输出是
【列表组件】
作用域插槽更具代表性的用例是列表组件，允许组件自定义应该如何渲染列表每一项
var childNode = {
template: `
var parentNode = {
template: ` <p>
</p><p>父组件</p>
<child>
<template>
<li>{{ props.text }}</li>
</template>
</child>
`,
components: {
'child': childNode
},
};
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
