<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<comp> </comp>
<!-- 具名插槽 替换 -->
<comp>
<input type="text" name="" id="" value="苹果" slot='mid' />
</comp>
</div>
<template id="comp">
<div id="">
<p>{{message}}</p>
<slot name="left">
<label>名字:</label>
</slot>
<slot name="mid">
<input type="text" name="" id="" value="" placeholder="输入名字" />
</slot>
<slot name="right">
<button type="button">确认</button>
</slot>
</div>
</template>
<script>
// 子组件
const comp = Vue.extend({
template: '#comp',
data() {
return {
message: 'Hello furong!',
}
},
})
// root
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
},
components: {
comp,
},
})
</script>
</body>
</html>
vue具名插槽slot
转载本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
[vue] slot插槽 默认插槽,具名插槽,作用域插槽
文章目录插槽不使用插槽效果分析默认插槽效果分析具名插槽效果分析作用域插槽效果
vue.js 插槽 App 作用域 -
【Vue】 slot插槽、具名插槽和作用域插槽
目录1. 为什么使用插槽?2. 内容插槽3. 具名插槽4. 作用域插槽5. 动态插槽名6. 具名插槽的缩写1. 为什么使
vue js javascript 插槽 作用域 -
vue3具名插槽(slot)
vue3具名插槽(slot)
vue.js 前端 javascript css 人工智能 -
32 Vue插槽slot的默认值和具名插槽使用2
[组件]slot插槽的默认值和具名插槽使用2阐述编写一个最基本的文件插槽默
vue.js 前端 javascript 插槽 默认值 -
3. Vue 具名插槽
Vue 具名插槽具名插槽实现一个组件的多个插槽的功能。一个
vue 插槽 .net vue.js -
vue 具名插槽的使用
【代码】vue 具名插槽的使用。
vue.js 前端 javascript App Vue