插槽要点
1、多个插槽,父组件使用solot属性区别,子组件使用name属性区分
2、样式可以存放到父组件或者子组件
3、标签中有变量,必须在父组件中完成转化
4、插槽类型:匿名插槽、具名插槽、作用域插槽
<!-- 这是父组件 -->
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App">
<!-- 匿名插槽 -->
<div >这是匿名插槽</div>
<!-- 具名插槽 -->
<div slot="mark">这是具名插槽:{{solt_mars}}</div>
<!-- 作用域插槽 -->
<template v-slot:title="values">
<h2 >作用域插槽标题:{{values.num}}</h2>
</template>
</HelloWorld>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
data(){
return {
solt_mars:'动态插槽内容'
}
},
components: {
HelloWorld
}
}
</script>
*************************************************
这是子组件
<template>
<div class="HelloWorld">
<!-- 匿名插槽 -->
<slot></slot>
<div>这一个分界线</div>
<!-- 具名插槽 -->
<slot name="mark"></slot>
<!-- 作用域插槽 -->
<slot name="title" :num="9527"></slot>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
}
</script>