vue中插槽的使用
一、插槽插槽,让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于父子组件(父传子),可以用于组件的二次封装。插槽分类:默认插槽、具名插槽、作用域插槽二、默认插槽当父组件没有插入时,插槽显示默认内容//父组件<template><div class="home"><h1>我是父组件</h1><HelloWorld ms
·
一、插槽
- 插槽,让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于父子组件(父传子),可以用于组件的二次封装。
- 插槽分类:默认插槽、具名插槽、作用域插槽
二、默认插槽
当父组件没有插入时,插槽显示默认内容
//父组件
<template>
<div class="home">
<h1>我是父组件</h1>
<HelloWorld msg="Welcome to Your Vue.js App">
<h2>父组件插入元素</h2>
</HelloWorld>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'Home',
components: {
HelloWorld
}
}
</script>
//子组件
<template>
<div>
<h1>我是子组件</h1>
<slot>我是插槽</slot>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
二、具名插槽
实现父组件向子组件指定位置添加元素
//父组件
<template>
<div class="home">
<h1>我是父组件</h1>
<HelloWorld msg="Welcome to Your Vue.js App">
<h2 slot="name">我的名字叫做{{name}}</h2>
<h2 slot="age">我的年纪{{age}}</h2>
</HelloWorld>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'Home',
components: {
HelloWorld
},
data(){
return {
name:"张三",
age:18
}
}
}
</script>
//子组件
<template>
<div>
<h1>我是子组件</h1>
<slot name="name"></slot>
<hr/>
<slot name="age"></slot>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
三、作用域插槽
数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定,比如两个地方都需要使用这个子组件,但是在子组件需要展示不同是数据结构,可以通过这个方法解决。
//父组件根据子组件的数据生成对应的结构插入到子组件中去
<template>
<div class="home">
<h1>我是父组件</h1>
<HelloWorld msg="Welcome to Your Vue.js App">
<template scope="scopeData">
<ul>
<li v-for="g in scopeData.list">{{g}}</li>
</ul>
</template>
</HelloWorld>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
export default {
name: "Home",
components: {
HelloWorld,
},
};
</script>
//子组件将数据传递给父组件
<template>
<div>
<h1>我是子组件</h1>
<slot :list="list"></slot>
</div>
</template>
<script>
export default {
name:"HelloWorld",
data(){
return{
list:["面试","上班","摸鱼","混工资","躺平","重开"]
}
}
}
</script>
<style>
</style>
更多推荐
已为社区贡献12条内容
所有评论(0)