Vue学习第二天:04Vue组件的核心概念“插槽”

<body>
    <div id="app">
        <ly-product-list class="ly-u-ul">
            <!-- 不写 v-slot默认就是默认插槽 -->
            <template v-slot>
                <ly-product v-for="(item,index) in productList" :key="index" :name="item.name" :specification="item.specification"
                    :price="item.price" :del="item.del" @delete="testDel">
                    <template v-slot:pre-icon="value">
                        <span v-if="value.val>0.5">🤭{{value.val}}</span>
                        <span v-else>😭{{value.val}}</span>
                    </template>
                    <!-- <span slot="suf-icon">😍</span> -->
                </ly-product>
            </template>
        </ly-product-list>
    </div>
    <script src="./vue.js"></script>
    <script type="text/javascript">
        Vue.component('ly-product', {
            name: 'lyProduct',
            template: `
                       <li @click="testFun">
                           <slot name="pre-icon" :val="value"  :val2="value"></slot>
                           {{name}}<br />
                           <span v-if="!del">{{specification+price}}元</span>
                           <span v-else style="text-decoration: line-through;">{{specification+price}}元</span>
                           <slot name="suf-icon">😂</slot>
                           <button v-show="del" @click.stop="currentClick">删除</button>
                       </li> 
                    `,
            props: {
                name: {
                    type: String,
                    default: ''
                },
                specification: {
                    type: String,
                    default: ''
                },
                price: {
                    type: Number,
                    default: 0
                },
                del: {
                    type: Boolean,
                    default: false
                }
            },
            data: function() {
                return {
                    value: Math.random()
                }
            },
            methods: {
                currentClick(e) {
                    alert(e.target.tagName.toLowerCase());
                    this.$emit('delete', this.name);
                },
                testFun() {
                    alert("testFun");
                }

            }
        })
        Vue.component('ly-product-list', {
            name: 'lyProductList',
            template: `
                <ul>
                    <slot></slot>
                </ul>
            `
        })
        var vm = new Vue({
            el: '#app',
            data: {
                productList: [{
                        name: "坚果",
                        // 规格
                        specification: "1包500g",
                        price: 99,
                        del: false
                    },
                    {
                        name: "面包",
                        // 规格
                        specification: "1包1000g",
                        price: 10,
                        del: true
                    }
                ]
            },
            methods: {
                testDel(val) {
                    alert(val);
                }
            }
        })
    </script>
</body>

总结:

  1. 插槽实际是一种父组件往子组件传递复杂数据的一种方式(比如传递组件或者元素)。
  2. 当只需要传递一个组件或元素时,使用默认插槽即可。
  3. 当需要传递多个组件或元素时,就需要使用具名插槽。
  4. 当子组件需要向父组件传递属性(data、props)并且父组件根据属性值的不同向子组件传递不同的组件或者元素时,就需要使用作用域插槽。
  5. 作用域插槽的本质上传递的是一个返回组件的函数。
  6. 作用域插槽向父组件传递的是一个对象(本例中的value),而val、val2其实是该对象的属性。
匿名

发表评论

匿名网友