vue组件之插槽

发布时间:2022-08-19 12:19

普通页面元素是有属性和内容的,在vue中我们通过prop让组件拥有了属性,那么这篇内容我们来了解一下怎么给组件添加内容

默认插槽

    <div id="app">
        <post-item>控件的值是通过组件的插槽传递过去的post-item>
    div>
    <script>
        Vue.component('PostItem', {
            template: '

'
}) let vm = new Vue({ el: "#app", }) </script>

在上述案例中,组件模板中

元素中使用了一个 元素,这个元素就是插槽,也可以理解为占位符。在父组件中给这个占位符添加内容,就出现了下列效果

vue组件之插槽_第1张图片

插槽的作用域和插槽的默认值

    <div id="app">
        
        <post-item>post-item>
        <post-item>{{ val }}post-item>
    div>
    <script>
        Vue.component('PostItem', {
            template: '

这个是插槽的默认值

'
}) let vm = new Vue({ el: "#app", data: { val: '这个是通过插槽动态传递过去的' } })
script>

如果通过插槽动态传递参数,动态参数是在父组件的作用域下解析的,而不是在子组件的作用域。除了动态传递参数,还可以给插槽定义一个默认参数。

vue组件之插槽_第2张图片

命名插槽

在组件中,可以会使用到多个插槽,所以可以给插槽进行命名。

<div id="app">
        <post-item>
            <template v-slot:item1>这个是通过命名插槽item1传递的template>
            <template v-slot:default>这个是通过默认插槽传递的template>
            <template #item2>这个是通过命名插槽item2传递的,这个v-slot指令是缩写语法template>
        post-item>

    div>
    <script>
        Vue.component('PostItem', {
            template: `


`
}); let vm = new Vue({ el: "#app", })
script>

在组件中给元素添加name属性来给插槽命名,在使用组件的时候通过给