17-插槽的基本使用 slot
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="./js/vue.min.js"></script>
<title></title>
</head>
<body>
<div id="app">
<cpn>
<span >111</span> <!-- 如果组件中自己设定了，那么就不会被插槽默认值替换 -->
</cpn>
<cpn>
<button>啊啊啊</button>
</cpn>
<cpn ></cpn>
<cpn></cpn>
</div>
<template id="tem1">
<div>
<h1>你好，我是全局组件语法糖</h1>
<slot><button>按钮</button></slot> <!-- 插槽可以设置默认值，这里的默认值就设置了button -->
</div>
</template>
<script>
Vue.component(
'cpn',{
template:'#tem1'
}
)
const app = new Vue({
el:'#app',
data:{
}
})
</script>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
