v-model和如何在组件之间使用v-model

铺垫知识:$event关键字

1.内联语句中通过$event可以获取

a. dom元素：事件对象, 就是默认的e对象, 如果一个方法需要传参的话可以传一个$event来获取事件对象
b. 组件：$emit传递出来的值, 下面active的值就是子组件传过来的值

<Son  @xxx="active = $event" />

一.dom元素上的v-model

---

表单元素上可以写v-model实现双向绑定, 那么它到底做了啥事呢?

语法:

		1. 对于不同的表单元素, v-model 干的事情略有不同
		2. 以输入框和复选框为例
		3. 在他们上面使用 v-model 本质是如下代码的简写

<input :value="xxx" @input="xxx = $event.target.value">
<input type="checkbox" :value="xxx" @change="xxx = $event.target.checked">

• :value ="xxx’’ ==== > 这个就是v-bind绑定了属性xxx
• @input =“xxx = $event.target.value” ==== > @input是input 输入事件, 和@click类似
• @change ====> 当checkbox发生改变, 鼠标失去焦点时触发
• 注意:
• input和change的区别: input只要是在输入框中输入了内容就会触发, 而change则需要输入完毕之后失去焦点或者按enter键才会触发

<template>
  <div id="app">
  <input type="text" :value="msg" @input="msg = $event.target.value" />
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
       msg: "",
    };
  },
};

这样就可以实现双向绑定了

---

<template>
  <div class="app">
    <h2>App</h2>
    <!-- 全选 -->
    <!-- <label>全选 <input type="checkbox" v-model="isCheckAll" /></label> -->
    <input
      type="checkbox"
      :value="isCheckAll"
      @change="isCheckAll = $event.target.checked"
    />
    <!-- 列表 -->
    <label v-for="item in list" :key="item.id"
      >{{ item.name }} <input v-model="item.isCheck" type="checkbox"
    /></label>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      list: [
        { id: 1, name: "🍅", isCheck: false },
        { id: 2, name: "🍉", isCheck: true },
        { id: 3, name: "🥦", isCheck: false },
        { id: 4, name: "🍍", isCheck: false },
      ],
    };
  },
  computed: {
    isCheckAll: {
      get() {
      	// 这里是我们给复选框的值, 如果条件满足, 那么返回true, 该复选框也就被选中了
        return this.list.every((v) => v.isCheck);
      },
      set(value) {
        // 该方法在计算属性被赋值时触发
        // 这里是复选框返回的bool值
        console.log(value);
        this.list.forEach((item) => (item.isCheck = value));
      },
    },
  },
};
</script>

<style>
.app {
  padding: 10px;
  background-color: skyblue;
}
label {
  display: block;
}
</style>

这是复选框的双向绑定

---

二. 组件上的v-model

其实知道了解了组件上的v-model等价于什么就可以相互替换了

组件上使用v-model等价于

<xxxxx :value="xxx" @input="xxx = $event"></xxxxx>

组件1: App.vue

<template>
  <div id="app">
    <BaseTabs :active="active" @activeChange="activeChange" />
    <div class="main">active:{{ active }}</div>
  </div>
</template>

<script>
import BaseTabs from "./components/BaseTabs.vue";
export default {
  name: "App",
  data() {
    return {
      active: "joke",
    };
  },
  components: {
    BaseTabs,
  },
  methods: {
    activeChange(newActive) {
      console.log("newActive:", newActive);
      this.active = newActive;
    },
  },
};
</script>

<style lang="less"></style>

组件二:

<template>
  <div>
    <ul class="base-tab">
      <li
        @click="$emit('activeChange', 'joke')"
        :class="{ active: active === 'joke' }"
      >
        开心一笑
      </li>
      <li
        @click="$emit('activeChange', 'hero')"
        :class="{ active: active === 'hero' }"
      >
        英雄百科
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "BaseTabs",
  props: {
    // active可以由外部传入，类型 String
    active: String,
  },
};
</script>

<style></style>

已知组件上使用v-model等价于

<xxxxx :value="xxx" @input="xxx = $event"></xxxxx>

所以接下来改就可
组件一:

  <BaseTabs :value="active" @input="active = $event" />

组件二:

 	<ul class="base-tab">
      <li @click="$emit('input', 'joke')" :class="{ active: value === 'joke' }">
        开心一笑
      </li>
      <li @click="$emit('input', 'hero')" :class="{ active: value === 'hero' }">
        英雄百科
      </li>
    </ul>
   props: {
    // active可以由外部传入，类型 String
    value: String,
  },

最后可以改成

<BaseTabs v-model="active" />

---

总结:

1 $event

• vue提供的内置的关键字
• dom元素：事件对象
• 组件上：$emit传递出来的值

2 v-model

1. 输入框中
   1. :value="info"
   2. @input="info=$event.target.value"
2. checkbox中
   1. :checked="isCheck"
   2. @change="isCheck=$event.target.checked"
3. 组件上
   1. :value="msg"
   2. @input="msg=$event"