Vue content distribution slot

Previous words

In order for components to be composed, a way is needed to mix the content of the parent component with the child component's own template. This process is calledContent Distribution(or "transclusion"). Vue implements a content distribution API, referring to the current draft web component specification, using the specialelement as the slot for the original content. This article will introduce in detail the Vue content distribution slot

Compilation scope

Before going deep into the content distribution API, first clarify in which scope the content is compiled. Assume that the template is

 {{ message }} 

Should messagebe bound to the data of the parent component or to the data of the child component? The answer is parent components. Component scope simply means: the content of the parent component template is compiled in the parent component scope; the content of the child component template is compiled in the child component scope.

A common mistake is to try to bind a directive to a child component property/method within the parent component template:

AssumptionsomeChildPropertyis a property of the child component, the above example will not work as expected. The parent component template should not know the state of the child component

If you want to bind a scoped directive to the root node of a component, you should do it on the component's own template:

Vue.component('child-component', { // 有效，因为是在正确的作用域内 template: '
Child
', data: function () { return { someChildProperty: true } } })

Similarly, distributed content is compiled in the parent scope

Discarded by default

Generally, if the child component template does not containSocket, the content of the parent component will bediscarded

##

var parentNode = { template: ` 
 
父组件
  
测试内容
  
 `, components: { 'child': childNode }, };

test content

var childNode = { template: ` 
 
子组件
  
 `, };

var parentNode = { template: ` 
 
父组件
  
测试内容
  
 `, components: { 'child': childNode }, };

var childNode = { template: ` 
 
子组件
   
 `, };

var childNode = { template: ` 
 
子组件
 
我是默认值 
 `, }; var parentNode = { template: ` 
 
父组件
  
 `, components: { 'child': childNode }, };

var childNode = { template: ` 
 
子组件
 
我是默认值 
 `, }; var parentNode = { template: ` 
 
父组件
  
我是设置值
  
 `, components: { 'child': childNode }, };

var childNode = { template: ` <p class="child"> <p>子组件</p> <slot name="my-header">头部默认值</slot> <slot name="my-body">主体默认值</slot> <slot name="my-footer">尾部默认值</slot> </p> `, };

var parentNode = { template: ` 
 
父组件
  
我是头部
 
我是尾部
  
 `, components: { 'child': childNode }, };

var childNode = { template: ` 
 
子组件
 主体默认值  
 `, };

var parentNode = { template: ` 
 
父组件
  
我是主体
 
我是其他内容
 
我是尾部
  
 `, components: { 'child': childNode }, };

var childNode = { template: ` 
 
子组件
 主体默认值 
 `, };

var parentNode = { template: ` 
 
父组件
  
我是主体
 
我是其他内容
 
我是尾部
  
 `, components: { 'child': childNode }, };