这里写目录标题
event深入
v-model深入
- 它是vue框架中指令,它主要结合表单元素一起使用(文本框,复选框,单选等等),它主要的作用是收集表单数据
- 双向绑定是:value与@input语法糖
<template>
<div>
<input type="text" :value="msg" @input="msg = $event.target.value">
{{ msg }}
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
msg: '我爱那塞北的雪'
}
}
}
</script>
深入v-model:实现父子组件数据同步(实现父子组件通信)
value与input事件实现的,而且还需要注意可以通过v-model实现父子组件同步
属性修饰符sync
组件通信方式的一种,可以实现父子组件数据同步
:money.sync,代表父组件给字符串传递props[money],给当前子组件绑定一个自定义事件(update:money)
.sync说明,我们把money传递给子组件并且可以监听到money的变化
父组件
<template>
<div>
<hr>
<!-- 相当于我们对prop的修改也变成了双向绑定 -->
<HelloWorld :value="msg" @update:value="msg=$event"></HelloWorld>
<HelloWorld :value.sync="msg"></HelloWorld>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
components: { HelloWorld },
name: 'App',
data() {
return {
msg: '我爱那塞北的雪'
}
},
methods:{
}
}
</script>
子组件
<template>
<div>
{{ value }}
<button @click="hand">改变父组件数据</button>
</div>
</template>
<script>
export default {
props:['value'],
methods: {
hand() {
this.$emit('update:value','新标题')
}
}
}
</script>
a t t r s 与 attrs与 attrs与listeners
children与$parent
作用域插槽scope-slot
事件(自定义事件与原生dom事件)
- 系统事件:click,鼠标事件等
- 自定义事件
- 自定义事件是需要 o n 与 on与 on与emit结合的 ,给原生dom绑定自定义事件是没有意义的,因为无法触发$emit.
- 给组件标签上绑定的事件不是系统事件,是自定义事件,自定义事件需要在组件内部触发,如果将自定义事件变为原生dom事件,需要加.nactive修饰符。
- 父组件内绑定自定义事件
<template>
<div>
<HelloWorld @input="click"></HelloWorld>
</div>
</template>
- 子组件内触发$emit,并可以传入相应参数
<template>
<div>
<input type="text" :value="value" @input="hand" placeholder="输入你想要的内容">
</div>
</template>
<script>
export default {
methods: {
hand(e) {
this.$emit('input', e.target.value)
}
}
}
</script>
.nactive的原理是给组件根标签绑定原生事件。