父组件怎样优雅的向子组件传递dom结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件的插槽（slot）</title>
<!--引入/vue.js-->
<script src="./vue.js"> </script>
</head>
<body>
<div id="root">
<!-- <child content="<p>Dell</p>">
</child> -->
<child >
<p>Dell</p>
</child>
</div>
<script>
Vue.component('child',{
props:['content'],
template:'<div> <p>Dell</p> <slot>默认内容</slot> </div>'
})
var app = new Vue({
el:'#root'
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件的插槽（slot）</title>
<!--引入/vue.js-->
<script src="./vue.js"> </script>
</head>
<body>
<div id="root">
<!-- <child content="<p>Dell</p>">
</child> -->
<body-content >
<div class="header" slot="header">header</div>
<div class="footer" slot='footer'>footer</div>
</body-content>
</div>
<script>
Vue.component('body-content',{
props:['content'],
template:'<div> <slot name="header"> </slot> Dell <slot name="footer"> </slot> </div>'
})
var app = new Vue({
el:'#root'
})
</script>
</body>
</html>
3.作用域插槽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件的插槽（slot）</title>
<!--引入/vue.js-->
<script src="./vue.js"> </script>
</head>
<body>
<div id="root">
<!-- <child content="<p>Dell</p>">
</child> -->
<body-content >
<!-- 作用域插槽必须使用template标签，数据放在props，应该怎样展示 -->
<template slot-scope="props">
<li>{{props.item}}-hello</li>
</template>
</body-content>
</div>
<script>
Vue.component('body-content',{
data:function(){
return{
list:[1,2,3,4]
}
},
template:'<div> <ul> <slot v-for="item of list":item=item> {{item}} </slot"> </ul> </div>'
})
var app = new Vue({
el:'#root'
})
</script>
</body>
</html>
网友评论