<!DOCTYPE html>
<html>
<head>
<title>Vue的插槽使用与命名插槽</title>
<meta charset="utf-8">
</head>
<body>
<div id="app">
<child >
<div class="zhang" slot="zhang">张三</div>
<div class="li" slot="li">李四</div>
</child>
</div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
//<p>dell</p><p>dell</p>,如果是这样的时候就是需要用到转义了；
//v-html,v-text;
//<slot></slot>,来显示插入的使用,忻城县，如果没有内容显示里面
//<div class="zhang" slot="zhang">张三</div>
//<slot name="zhang">忻城县</slot>
//<p></p>内容的东西;
Vue.component("child",{
props:{
content:String
},
template:`<div >
<slot name="zhang">忻城县</slot>
<h1>小孩子</h1>
<slot name="li">忻城县</slot>
</div>`
/*template:`<div v-html="this.content">
{{content}}
</div>`*/
})
var app=new Vue({
el:"#app"
})
</script>
</html>
Vue的插槽使用与命名插槽
最新推荐文章于 2023-03-24 15:29:21 发布
276
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
