组件进阶加插槽等知识点

01-v-model语法糖

• v-model本质上是 value属性和input事件的一层包装

• v-model的作用：提供数据的双向绑定

  • 数据发生了改变，页面会自动变 v-bind:value

  • 页面输入改变 ， 数据会自动变化 v-on:input

• v-model是语法糖， v-model等价于 给一个input框提供了 :value属性以及 @input事件

很显然如果每次使用input框，都需要提供value和input事件，比较麻烦，所以使用v-model

<template>
  <div>
    <h1>根组件App.vue</h1>
    <!-- 
      1.v-model = "msg"
        (1)data中的数据变化,表单的值也会变化     :value="msg"
        (2)表单的值发生变化,data中的数据也会变化  @input="msg=$event.target.value"
    -->
    <input type="text" v-model="msg" />
    <hr />
    <!-- 这种写法与上面写法功能一致 -->
    <input type="text" :value="msg" @input="msg = $event.target.value" />
    <hr />
    <!-- 这种写法也与上面写法一致 -->
    <input type="text" :value="msg" @input="doInput" />
    <hr />
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: ""
    };
  },
  methods: {
    doInput(e) {
      this.msg = e.target.value;
    }
  }
};
</script>

<style>
</style>

02-组件使用v-model

• 我们经常遇到一种场景：

  1. 父组件提供一个数据给子组件使用（父传子）

  2. 子组件又需要修改父组件传过来的这个数据，所以需要子传父把值传给父组件。

• 这种场景可以使用v-model进行简写。

  • 定义组件的时候，注意接收的值叫value， 子传父触发的事件叫 input

  • 如果父传子的props值叫 value, 且 子传父触发的事件叫 input 。 那么这两个功能就可以使用v-model来简写

03-ref和$refs(vue操作dom)

• ref作用：在vue中操作dom元素或组件vm实例

  • vue不推荐我们直接操作dom。如果真的要在vue中操作dom,可以使用ref语法

    • 说人话 ： vue不能直接操作dom，真的要操作也要按vue规定的语法来。（ref语法）

• 每个 vue 的组件实例上，都包含一个$refs 对象，里面存储着对应的DOM 元素或组件的引用。

ref语法使用流程语法

(1)给标签添加自定义属性red :<button ref="属性名"></button>

• vue会自动把页面所有的ref属性，挂载到vue实例的$ref对象中

(2)通过 vm.$refs.属性名 获取该标签

• 一定要注意 : vue在mounted勾子中完成页面真实DOM渲染，所以最早能获取dom的就是mounted钩子

ref易错点

1.添加的的时候是: ref

2.获取的时候是: $refs

1 给需要获取的 dom 元素或者组件, 添加 ref 属性

<template>
  <div>
    &l