class="father">
這裡是父元件h3>
class="tmpl">
選單1span>
選單2span>
選單3span>
選單4span>
選單5span>
選單6span>
div>
child>
div>
template>
class="child">
這裡是子元件h3>
slot>
div>
template>
class="tmpl">
選單1span>
選單2span>
選單3span>
選單4span>
選單5span>
選單6span>
div>
注：所有demo都加了樣式，以方便觀察。其中，父元件以灰色背景填充，子元件都以淺藍色填充。
class="father">
這裡是父元件h3>
class="tmpl"
slot="up">
選單1span>
選單2span>
選單3span>
選單4span>
選單5span>
選單6span>
div>
class="tmpl"
slot="down">
選單-1span>
選單-2span>
選單-3span>
選單-4span>
選單-5span>
選單-6span>
div>
class="tmpl">
選單->1span>
選單->2span>
選單->3span>
選單->4span>
選單->5span>
選單->6span>
div>
child>
div>
template>
class="child">
// 具名插槽
name="up">
slot>
這裡是子元件h3>
// 具名插槽
name="down">
slot>
// 匿名插槽
slot>
div>
template>
匿名插槽
slot>
具名插槽
name="up">
slot>
"up" :data="data">slot>
export
default
},}
html模板
class="father">
這裡是父元件h3>
slot-scope="user">
class="tmpl">
v-for="item in user.data">
}span>
div>
template>
child>
slot-scope="user">
v-for="item in user.data">
}li>
ul>
template>
child>
slot-scope="user">
}template>
child>
我就是模板
child>
div>
template>
class="child">// 作用域插槽
data="data">
export default
}}
深入理解vue中的slot與slot scope
vue中關於插槽的文件說明很短，語言又寫的很凝練，再加上其和methods，data，computed等常用選項在使用頻率 使用先後上的差別，這就有可能造成初次接觸插槽的開發者容易產生 算了吧，回頭再學，反正已經可以寫基礎元件了 的想法，於是就關閉了vue的說明文件。實際上，插槽的概念很簡單，下面通...
深入理解vue中的slot與slot scope
vue中關於插槽的文件說明很短，語言又寫的很凝練，再加上其和methods，data，computed等常用選項使用頻率 使用先後上的差別，這就有可能造成初次接觸插槽的開發者容易產生 算了吧，回頭再學，反正已經可以寫基礎元件了 於是就關閉了vue說明文件。實際上，插槽的概念很簡單，下面通過分三部分來...
vue的深入理解
1.vue的初步認識 var data var vm new vue document.write vm.data data true document.write true document.write vm.el document.getelementbyid vue det true new ...