1. slot 实现组件内替换

    用法：比如在用router时，在站内跳转想要使用router-link，而站外使用普通a标签，那就可以通过实现link组件，判断传入的值是object还是普通字符串，从而自动实现router-link和普通a的切换

  2. 双向数据沟通v-model语法糖

    2.1. 父组件要传值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <tempalte>
    <div>
      <child-component v-model="bind"></child-component>
      // 上面这一句实际上等于
      // <child-component :value="bind" @input="bind=$event.target.value"></child-component>
    </div>
    </template>
    <script>
    export default {
      data() {
        return {
          bind: 123123
        }
      }
    }
    </script>

    2.2 子组件要做两件事

    • 确保props中有value

    • 确定子组件值改变时，想上触发了input事件

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      <template>
        <input type="text" @change="handleChange" :value="value">
      </template>
      <script>
      export default {
        props: ['value']                  // props中有value
        methods: {
          handleChange: function(ev) {
            this.$emit('input', ev)       // 触发了input事件
          }
        }
      }
      </script>