|
在平时开发中，我们有这样一个需求，就好比如，父组件传给子组件的值，在子组件中进行某个操作时，子组件想改变这个值，并把这个值给到父组件【弹框的显示和隐藏】【这个操作类似于vue中的v-model】
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。（额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。）
第一：通过自定义事件去解决这一问题【实现组件中的双向绑定】：我们来看下面的例子：
****父组件代码如下
<template>
<div>
<h1>props的修饰符</h1>
<button @click="fun">点击我，让子组件显示出来</button>
<Zi @isUpop="fun1" v-if="isUpop" />
</div>
</template>
<script>
import Zi from './zi.vue'
export default {
components: {
Zi,
},
data() {
return {
isUpop: false,
}
},
methods: {
fun() {
this.isUpop = true
},
fun1(bol) {
this.isUpop = bol
},
},
}
</script>
?
?**** 子组件代码在这儿：
<template>
<div>
<h3>我是子组件，通过props的修饰符来让我显示和隐藏</h3>
<button @click="fun">点击关闭子组件</button>
</div>
</template>
<script>
export default {
props: {},
methods: {
fun() {
this.$emit('isUpop', false)
},
},
}
</script>
第二：上面的写法虽然可以实现改功能，但vue却提供了更加方便的写发，那就是update与props修饰符.sync的结合,来看代码的变化
**** 父组件
<template>
<div>
<h1>props的修饰符</h1>
<button @click="fun">点击我，让子组件显示出来</button>
<Zi :isUpop.sync="isUpop" v-if="isUpop" />
</div>
</template>
<script>
import Zi from './zi.vue'
export default {
components: {
Zi,
},
data() {
return {
isUpop: false,
}
},
methods: {
fun() {
this.isUpop = true
},
}
</script>
**** 子组件
<template>
<div>
<h3>我是子组件，通过props的修饰符来让我显示和隐藏</h3>
<button @click="fun">点击关闭子组件</button>
</div>
</template>
<script>
export default {
props: {},
methods: {
fun() {
this.$emit('update:isUpop', false)
},
},
}
</script>
其实.sync是一种缩写：
<Zi :isUpop.sync="isUpop" v-if="isUpop" />
? ? ? ? ? ? ? ? ? ==
上面一行代码等价于下面
<Zi @update:isUpop="fun1" v-if="isUpop" />
<script>
methods: {
fun1(bol) {
this.isUpop = bol
},
},
</script>
以上是我在学习的过程中自己的一个理解，希望可以帮到有需要的你，同时如果此博客中的内容有欠缺或理解不对的地方，还望大家多多指教。
|