Vue-08-具名插槽
2020-06-04 06:45
106 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
Vue.component("myLi",{
template:`
<li>
预留的第一个位置
<slot name="two"></slot>
预留的第二个位置
<slot name="three"></slot>
</li>
`
});
var App = {
template:`
<div>
<ul>
<myLi>
<h2 slot="two">我是应该插在第一个位置的H2标签</h2>
<h3 slot="three">我是应该插在第二个位置的H3标签</h3>
</myLi>
</ul>
</div>
`
};
new Vue({
el:"#app",
components:{
App
},
template:`<App/>`
})
</script>
</body>
</html>
没啥好说的。。就这样吧
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- vue.js之slot插槽
- vue-render函数和插槽
- vue组件中插槽slot
- Vue使用具名插槽细节
- Vue 作用域插槽 列表组件 示例
- VUE-插槽详细图解
- 浅谈Vue中的作用域插槽
- 深入理解Vue组件七——Vue中的作用域插槽
- vue插槽和作用域插槽的理解
- 详解Vue 匿名、具名和作用域插槽的使用方法
- Vue 插槽详解
- vue slot插槽的小技巧
- vue中的作用域插槽(slot)
- Vue插槽，动画
- Vue.js-08：第八章 - 组件的基础知识
- Vue作用域插槽详解
- vue 插槽理解
- vue 全局插槽 全局插座
- 使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件
- vue中插槽slot的使用