vue深入组件之sync修饰符和属性透传$attrs

1.首先，vue的响应式中，规定了不允许子组件去改变props的值。即，props的值通过父组件来传递和改变，也就意味着，数据是单向传输的。并且，当我们在进行高级组件的开发，对ui组件库进行二次封装的时候，sync修饰符和透传属性$attrs就显得非常有用了。

2.我们先看看sync修饰符的用法：

通过父子组件来实现一个model框的显示和隐藏

父级组件的代码如下：

<!-- 父级组件：-->
<template>
	<div>
    <rules-modal :isShow.sync="isShowRules">
    </rules-modal>
	</div>
</template>
<script>
export default {
    data(){
    	return{
    		isShowRules : false,
    	}
    },
};
</script>

子组件的代码如下：

<!-- 子级组件：-->
<template>
    <div v-if="isShow" class="rules-modal">
       <p @click="closeModal()">嗯嗯</p>
    </div>
</template>

<script>
export default {
    props: {
        isShow: {
            type: Boolean,
            default: false,
        }
    },
    data() {
        return {
            isShowModal: null,
        };
    },
    methods: {
        closeModal() {
           this.isShowModal = false; 
           this.$emit('update:isShow',this.isShowModal);
        }
    },
    watch: {
        isShow: {
            handler: function (nv, ov) {
            		this.isShowModal = nv;
            },
            deep: true,
            immediate: true
        },
    },
};
</script>

到这里，我们就实现了一个props的双向绑定的组件，显示和隐藏model框。

3.透传属性关于官方的介绍文档是这样的

包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

这段白话可以理解为，当封装组件的时候，不需要子组件进行props声明并且可以拿到值的属性，而且父组件在传值的时候是非class和style的属性。接下来看一个例子：

通过 props 传值进来的写法

<template>
  <div>
    <el-input v-model="myc"
      :placeholder="configProps.placeholder"
      :clearable="configProps.clearable"></el-input>
  </div>
</template>

当不声明props的属性时，通过$attrs传递的写法

 子组件

<template>
  <div>
    <el-input v-bind="$attrs" ></el-input>
  </div>
</template>

父组件调用

<template>
  <div>
    <I-input placeholder="我是通过$attrs传递"
      :clearable="true" ></I-input>
  </div>
</template>