日常开发问题记录--VUE篇 (持续更新)

1、vue组件中非表单元素如何使用v-model达到双向绑定？

在子组件中使用model属性配置接收字段名及$emit触发的事件名称，如下：

export default {
    data() {
        return {
            
            value: 0
        };
    },
    props: {
        // 双向绑定value，可为tab的name或索引
        _value: String | Number,
        // tab类型，默认或card
        type: String
    },
    model: {
        prop: "_value",
        event: "valuechange"
    },
    watch: {
        _value(newV) {
            this.value = newV;
        },
        value(v) {
            // 触发v-model双向绑定数据
            this.$emit("valuechange", v);
        }
    },
    created() {
        this.value = this._value;
    }
};
</script>

2、如何在父组件样式scoped时修改插槽中的子组件样式？

使用/deep/

/** .tabs为父组件样式类  .tab为子组件样式类 **/
.tabs /deep/ .tab {
    // 子组件样式所在处
}

3、vue递归组件需具备什么条件？

1、组件的name，组件内调用自身需要用到。
2、递归终止条件，避免出现死循环。

4、$slots和$scopedSlots

1、$slots通常用来处理默认插槽或具名插槽，比如this.$slots.default,this.$slots.title 2、this.$scopedSlots通常用来处理作用域插槽，且通常以函数形式呈现，比如

父组件
<child>
    <template v-slot:title="scope">
        *{{scope.title}}
    </template>
</child>

子组件
<template>
    <slot name="title" title="哈哈哈"></slot>
</template>
<script>
    export default {
        mounted(){
            this.$scopedSlots.title({title:"123123"})
        }
    }
</script>