父子组件传值,父组件可以给子组件传值,但是子组件是不能修改组件提供的值,这里vue提供了sync修饰符,以前父组件点击子组件显示,子组件关闭按钮,父组件再点击子组件就无法让子组件显示。因为子组件点击关闭时候v-show属性为false,父组件只能在子组件中设置ref,通过ref获取到子组件的v-show属性,然后在点击事件下更改子组件的v-show属性为true,这样点击父组件点击子组件,子组件就能显示了。

现在可以通过sync修饰符子组件可以更改父组件的v-show属性。

Child:

<template>
<div>
<div v-if="show">
<p>默认初始值是{{show}},所以是显示的</p>
<button @click.stop="closeDiv">关闭</button>
</div>
</div>
</template> <script>
export default {
name: "Child",
props:['show'],
methods:{
closeDiv() {
this.$emit('update:show', false); //触发 input 事件,并传入新值
}
}
}
</script> parents:
<template>
<div class="hello">
<Child :show.sync="valueChild"></Child>
<button @click="changeValue">toggle</button>
</div>
</template>
会拓展为:
<div class="hello">
<Child :show="valueChild" @change='update: show="val=valueChild=val'></Clild>
当子组件需要更新show的值时,它需要显式地触发一个更新事件:this.$emite('update:show',newValue)
</Child>
<button @click="changeValue">toggle</button> </div>
<script>
import Child from '../components/Child'
export default {
name: 'HelloWorld',
components:{
Child
}, data () {
return {
msg: 'Welcome to Your Vue.js App',
valueChild:true,
}
},
methods:{
changeValue(){
this.valueChild = !this.valueChild
}
}
}
</script>
 

Vue sync修饰符的使用的更多相关文章

  1. vue .sync修饰符

    .sync 修饰符 对一个 prop 进行“双向绑定”时,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源. 那这个修饰符的原理是什么呢?其实还是vu ...

  2. Vue .sync修饰符与$emit(update:xxx)写法问题

    在学习vue自定义事件的.sync修饰符实现改变数值时发现一个问题如下由于props的大小写命名:fatherNum,对应不同的$emit()会有不同的效果,具体如下: 使用.sync修饰符,即 // ...

  3. vue .sync 修饰符和自定义v-model的使用

    VUE 是单向数据流 当我们需要对一个 prop 进行"双向绑定"时 vue 修饰符.sync 子组件:this.$emit('update:visible', visible), ...

  4. vue 之 .sync 修饰符

    在一些情况下,我们可能会需要对一个 prop (父子组件传递数据的属性) 进行“双向绑定”. 在vue 1.x 中的 .sync 修饰符所提供的功能.当一个子组件改变了一个带 .sync 的prop的 ...

  5. vue中.sync 修饰符

    一直以来,都不太明白.sync的用法,归根结底原因在于,没有仔细阅读“.sync修饰符”. 正好,最近在拿一个项目练手,然后使用了elment-ui,然后在用到dialog的时候,属性visible是 ...

  6. 043——VUE中组件之使用.sync修饰符与computed计算属性实现购物车原理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Vue中v-model解析、sync修饰符解析

    上善若水,水善利萬物而不爭.——<道德經> 简介 在平时开发是经常用到一些父子组件通信,经常用到props.vuex等等,这里面记录另外的三种方式v-model.sync是怎么使用,再说是 ...

  8. vue的.sync 修饰符

    很多时候,我们会对 prop (父子组件传递数据的属性) 进行“双向绑定” 在vue 1.x 中的 .sync 修饰符所提供的功能.当一个子组件改变了一个带 .sync 的prop的值时,这个变化也会 ...

  9. vue中的.sync修饰符用法

    在项目中接触到父组件传值给子组件的时候,想在子组件改变父组件传的值.(比如用于弹窗关闭) 但是正常来说,vue2是不允许子组件直接改父组件传进去的值的. 所以我们需要在子组件内定义自定义事件,通知父组 ...

随机推荐

  1. 【记录】ASP.NET XSS 脚本注入攻击

    输入进行 Html 转码: HttpUtility.HtmlEncode(content); 输入保留 Html 标记,使用 AntiXSS 过滤: Install-Package AntiXSS M ...

  2. 解析json

    String json = "{\"elements\":[{\"distance\":{\"text\":\"1364 ...

  3. 跟着百度学PHP[4]-OOP面对对象编程-3-实例化一个对象

    当定义好类后,我们使用new关键字来实例化一个对象! 格式: $object = new 类名; <?php class Person{ private $name; "; priva ...

  4. 如何设置通过ip访问数据库

    文章转自:http://blog.163.com/wz_pk007/blog/static/17062705020119242440713/ 问题:mysql只能用localhost或127.0.0. ...

  5. poj2262

                                                                                                   Goldb ...

  6. 导入Excel文件

    选择文件 #region //获取路径 string FilePath = ""; //选择文件 OpenFileDialog openFileDialog1 = new Open ...

  7. Angularjs 中的 controller

    接触过程序开发的小伙伴们对 MVC 的开发方式想必一点也不陌生,是的, angularjs 所採用的方式便是 MVVM 的开发方式,这里的 controller 即控制器 了解 controller ...

  8. 布隆过滤器 Bloom Filter

    使用普通集合来判断一个元素是否已存在于集合中,需要占用比较大的空间.而使用Bloom Filter 可有效节省空间. Bloom Filter 以较少的内存占用及较小的误判率达到判断元素是否存已经加入 ...

  9. ArrayList 一个面试题

    我们现在有一个集合,集合里面有100个随机数,获取其中的基数: //假设我们得到了100个随机数 List<Integer> lists = new RandomArrayList< ...

  10. linux xfs文件系统无法用readdir获取dirent文件类型d_type则用stat获取暨stat函数讲解

    stat函数讲解 表头文件:    #include <sys/stat.h>             #include <unistd.h>定义函数:    int stat ...