什么时候使用插槽:父组件想往子组件传递元素标签或dom节点,子组件可通过slot调用传过来的内容;还可以传子组件
- 初始代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>20</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
template: `<myform />`
});
app.component('myform', {
methods:{
handleClick() {
alert(123)
}
},
template: `<div>
<input />
<button @click="handleClick">提交</button>
</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
- 需求:父组件中有两处调用子组件,需要第一处调用的时候,提交是div标签,第二处调用的时候提交是button标签
- 解决方法:使用插槽:用双标签把想要传递给子组件的内容包在标签里;然后在子组件中使用
1)用双标签把像传递的子组件内容包起来:
// slot 插槽
const app = Vue.createApp({
template: `
<myform>
<div>提交</div> // slot
</myform>
<myform>
<button>提交</button>
</myform>
`
});
2)子组件中使用插槽
app.component('myform', {
methods:{
handleClick() {
alert(123)
}
},
template: `
<div>
<input />
<slot></slot>
</div>
`
})
注:slot标签没法直接绑定事件,可以包一层标签用来绑定事件
app.component('myform', {
methods:{
handleClick() {
alert(123)
}
},
template: `
<div>
<input />
<span @click="handleClick">
<slot></slot>
<span>
</div>
`
})
完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>20</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
// slot 插槽
// 父模板里调用的数据属性,使用的都是父模板的数据
// 子模板里调用的数据属性,使用的都是子模版里的数据
const app = Vue.createApp({
data() {
return {
text: '提交'
}
},
template: `
<myform>
<div>{{text}}</div>
</myform>
<myform>
<button>{{text}}</button>
</myform>
`
});
app.component('myform', {
methods:{
handleClick() {
alert(123)
}
},
template: `
<div>
<input />
<span @click="handleClick">
<slot></slot>
<span>
</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>