你不知道的v-bind

前言

v-bind可以说是vue中最常用的一个属性，但是你真的了解它吗？

1.绑定属性

v-bind最常用的就是给元素绑定属性，如下：
代码：

// 可以绑定单个或多个属性,可简写为：
<div :class="name">123456</div>
<div :class="{ red: isRed, blue: isRed }">45678</div>

效果：

2.给组件绑定多个属性

在引用组件的时候，是不是遇到过需要同时设置多个属性的情况：

	<el-input
      type="textarea"
      :rows="2"
      placeholder="请输入内容"
      v-model="textarea"
    >
    </el-input>

如果属性很多的话，可能不太美观，我们可以用v-bind进行简写：

// 使用 v-bind直接绑定一个对象
<el-input v-bind="typeAn" v-model="textarea"> </el-input>
// 同时在data中定义：
typeAn: { type: "textarea", rows: "2", placeholder: "请输入内容" },

3.给组件传递props

你是不是还在这样给子组件传递值：

<com02Vue :age="age" :name="name" :hobby="hobby"></com02Vue>

大人，时代变啦； 不妨试试这样 ：

	<com02Vue v-bind="obj"></com02Vue>
	// data中定义obj
	obj: {
        age: 12,
        name: "liyfn",
        hobby: "sleep",
      },

一样可以拿到：

// 把父组件传过来的已接收的值全部“转发”给子组件
 <com02Vue v-bind="$props"></com02Vue>
 // 把父组件传过来的未接收的值全部“转发”给子组件
 <com02Vue v-bind="$attrs"></com02Vue>

4.配合修饰符

props传过来的值是没有双向绑定的，你需要通过在子组件通过$emit触发父组件的方法去改变父组件的值，但我们可以用.sync简化这个过程；

// 父组件
<com01Vue :isOk.sync="isOk"></com01Vue>
// 子组件
this.$emit("update:isOk", false);

讲完用法，来看看源码吧：

 function bindObjectProps(data, tag, value, asProp, isSync) {
      if (value) {
      // 非对象，报警告
          if (!isObject(value)) {
              warn$2('v-bind without argument expects an Object or Array value', this);
          }
          else {
              if (isArray(value)) {
                  value = toObject(value);
              }
              var hash = void 0;
              var _loop_1 = function (key) {
               // 判断是否为自有属性
                  if (key === 'class' || key === 'style' || isReservedAttribute(key)) {
                      hash = data;
                  }
                  else {
                  // 其他情况下
                      var type = data.attrs && data.attrs.type;
                      // 如果key要作为props hash赋值为data.domProps, 否则赋值为data.attrs
                      hash =
                          asProp || config.mustUseProp(tag, type, key)
                              ? data.domProps || (data.domProps = {})
                              : data.attrs || (data.attrs = {});
                  }
                  var camelizedKey = camelize(key);
                  var hyphenatedKey = hyphenate(key);
                  if (!(camelizedKey in hash) && !(hyphenatedKey in hash)) {
                      hash[key] = value[key];
                      if (isSync) {
                          var on = data.on || (data.on = {});
                          on["update:".concat(key)] = function ($event) {
                              value[key] = $event;
                          };
                      }
                  }
              };
              for (var key in value) {
                  _loop_1(key);
              }
          }
      }
      return data;
  }

这部分代码是将v-bind语句进行解析，其实核心代码就下面部分：通过遍历v-bind后的对象，判断其作为prop传值使用或是作为属性使用。