87,910
社区成员
发帖
与我相关
我的任务
分享vue slot 默认值显示不出来
<html>
<title>
vue 学习
</title>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="app">
<h1>{{msg}}</h1>
<!-- 插入子组件 -->
<runoob></runoob>
</div>
<!-- 组件模板 -->
<template id="cnp">
<slot name="header">
<h2>这是header默认内容</h2>
</slot>
<slot name="footer">
<h2>这是footer默认内容</h2>
</slot>
</template>
</body>
<script type="text/javascript">
//注册一个全局组件
Vue.component('runoop',{
template: '#cnp',
data(){
return {
// msg:'自定义组件!'
}
}
})
//定义Vue 对象
var vue = new Vue({
el:"#app",
data(){
return{
msg:"hello world"
}
},
methods:{
}
})
</script>
</html>
两个插槽的值都显示不出来 怎么回事呢
...全文
请发表友善的回复…
发表回复
落落叶叶无声 2020-07-30
- 打赏
- 举报
你的代码有两处错误...
<div id="app">
<h1>{{msg}}</h1>
<!-- 插入子组件 -->
<runoop></runoop><!-- 这里写错了，runoob??? -->
</div>
<!-- 组件模板 -->
<template id="cnp">
<div> <!-- template最外层需要用一个标签包围住 -->
<slot name="header">
<h2>这是header默认内容</h2>
</slot>
<slot name="footer">
<h2>这是footer默认内容</h2>
</slot>
</div>
</template>
jio可 2020-07-29
- 打赏
- 举报
把组件新建一个vue文件
import cp from 'xxx'
Vue.component('runoop', cp)
父组件使用没有指定slot属性，默认为default
在slot中可以使用默认值，如果父组件没有传递对应的slot，则会显示默认值
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
[removed][removed]
</head>
<body>
<!-- 调用父组件的方法 -->
