vue组件之插槽

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

默认插槽

    <div id="app">
        <post-item>控件的值是通过组件的插槽传递过去的post-item>
    div>

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

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

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

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

    <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>

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

命名插槽

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

<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属性来给插槽命名，在使用组件的时候通过给