铺垫知识:$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
- 输入框中
:value="info"
@input="info=$event.target.value"
checkbox
中:checked="isCheck"
@change="isCheck=$event.target.checked"
- 组件上
:value="msg"
@input="msg=$event"