Vue插槽

Vue插槽

总结的B站阿婆主哈默的视频
父组件传值到子组件
父组件

<template>
    <div id="parent">
        <navigation-link url="www.baidu.com"></navigation-link>
    </div>
</template>
<script>
import Child from "./child.vue";
export default{
    components: {
        NavigationLink: Child
    },
    data() {
        return {
            user: {
            name: "hamo"
          }
        }
    }
};
</script>

子组件

<template>
    <div>
        <a :href="url">baidu</a>
    </div>
</template>
<script>
export default{
    props: ["url"]
}
</script>

若想配置文字，引入插槽

父组件

子组件

结论：父组件的template只能访问父组件的data

具名插槽

<template>
    <div id="parent">
       <base-layout>
            <div slot="header">
                <h1>标题1</h1>
            </div>
            <div>
                <p>内容</p>
            </div>
            <div slot="footer">
                <h1>标题1</h1>
            </div>
       </base-layout>
    </div>
</template>
<script>
import Child from "./child.vue";
export default{
    components: {
        BaseLayout: Child
    },
    data() {
        return {
            user: {
            name: "hamo"
          }
        }
    }
};
</script>

子组件

<template>
    <div class="child">
        <header>
            <slot name="header"></slot>
        </header>
        <main>
            <slot></slot>
        </main>
        <footer>
            <slot name="footer"></slot>
        </footer>
    </div>
</template>
<script>

export default{
    props: ["url"]
}
</script>

具名插槽会渲染到他名字那里
在vue2.6.0+中稍有不同
父组件中的slot改为v-slot:参数，slot外的div改为template

**

解决父组件无法访问子组件数据（父组件传递给子组件的数据）的问题

**
子组件

父组件增加

父组件取值