{{ message }}

Vue.component('child-component', {
 // 有效，因為是在正確的作用域內
 template: 'Child

var parentNode = {
 template: `
 
 
父組件
 
  
測試內容
 
 

如下圖所示，所包含的

測試內容

匿名slot

當子組件模板只有一個沒有屬性的 slot 時，父組件整個內容片段將插入到 slot 所在的 DOM 位置，并替換掉 slot 標簽本身

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

var parentNode = {
 template: `
 
 
父組件
 
  
測試內容
 
 
 `,
 components: {
 'child': childNode
 },
};

如果出現多于1個的匿名slot，vue將報錯

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

【默認值】

最初在 標簽中的任何內容都被視為備用內容，或者稱為默認值。備用內容在子組件的作用域內編譯，并且只有在宿主元素為空，且沒有要插入的內容時才顯示備用內容

當slot存在默認值，且父元素在中沒有要插入的內容時，顯示默認值

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

當slot存在默認值，且父元素在中存在要插入的內容時，則顯示設置值

var childNode = {
 template: `
 
 
子組件
 
我是默認值
 
 `,
};
var parentNode = {
 template: `
 
 
父組件
 
  
我是設置值
 
 
 `,
 components: {
 'child': childNode
 },
};

具名Slot

元素可以用一個特殊的屬性 name 來配置如何分發(fā)內容。多個 slot 可以有不同的名字。具名 slot 將匹配內容片段中有對應 slot 特性的元素

var childNode = {
 template: `
 
 
子組件
 頭部默認值
 主體默認值
 尾部默認值
 
 `,
};

var parentNode = {
 template: `
 
 
父組件
 
  我是頭部

  我是尾部

 
 
 `,
 components: {
 'child': childNode
 },
};

仍然可以有一個匿名 slot，它是默認 slot，作為找不到匹配的內容片段的備用插槽。匿名slot只能作為沒有slot屬性的元素的插槽，有slot屬性的元素如果沒有配置slot，則會被拋棄

var childNode = {
 template: `
 
 
子組件
 主體默認值
 
 
 `,
};

var parentNode = {
 template: `
 
 
父組件
 
  我是主體

  
我是其他內容
  我是尾部

 
 
 `,
 components: {
 'child': childNode
 },
};

插入中，

我是其他內容

var childNode = {
 template: `
 
 
子組件
 主體默認值
 
 `,
};

var parentNode = {
 template: `
 
 
父組件
 
  我是主體

  
我是其他內容
  我是尾部

 
 
 `,
 components: {
 'child': childNode
 },
};

var childNode = {
 template: `
 

 默認值
 
 `,
 data(){
 return{
  items:[
  {id:1,text:'第1段'},
  {id:2,text:'第2段'},
  {id:3,text:'第3段'},
  ]
 }
 }
};

var parentNode = {
 template: `
 
 
父組件
 
  
  
{{ props.text }}
  
 
 
 `,
 components: {
 'child': childNode
 },
};