vue中使用v-model完成组件间的通信

更新日期: 2019-07-21阅读: 1.9k标签: 通信

父子传递“双向绑定”

如何实现两个组件之间的双向传递呢?即,在父组件中修改了值,子组件会立即更新。在子组件中修改了值,父组件中立即更新。

vue中有一个很神奇的东西叫v-model,它可以完成我们的需求。

使用v-model过程中,父组件我们还是需要将子组件正常引入,只是传值方式改成了v-model

父组件

<template>
  <div>
    {{fatherText}}
    <Child v-model="fatherText"></Child>//调用子组件,并将 fatherText传递给子组件
    <button @click="changeChild">changeChildButton</button>
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  name: "father",
  data() {
    return {
      fatherText: "i'm fathertext"
    };
  },
  components: {
    Child
  },
  methods: {
    changeChild() {
      this.fatherText = "father change the text";
    }
  }
};
</script>

子组件

<template>
  <div>
   <p class="child" @click="change">{{fatherText}}</p>//正常使用fatherText的值,并添加一个修改值 的方法
  </div>
</template>
<script>
export default {
  name: "child",
  model: {//添加了model方法,用于接收v-model传递的参数
    prop: "fatherText", //父组件中变量的传递
    event: "changeChild" //事件传递
  },
  props: {
    fatherText: {//正常使用props接收fatherText的值
      type: String
    }
  },
  data() {
    return {
     
    };
  },
  methods: {
      change(){
          this.fatherText = 'son change the text'
      }
  }
};
</script>

在这里,报了一个错误,这是因为数据流是单向的,但是我们在这里,子组件不应该直接修改props里的值。
这里不能直接修改,所以我们需要迂回着修改,在子组件中定义一个自己的变量,再将props的值赋值到自己的变量,修改自己的变量是可以的。


子组件 - 修改props中的值

<template>
  <div>
    <p class="child" @click="change">{{childText}}</p>
  </div>
</template>
<script>
export default {
  name: "child",
    model: {
    prop: "fatherText", //父组件中变量的传递
    event: "changeChild" //事件传递
  },
  props: {
    fatherText: {
      type: String
    }
  },
  data() {
    return {
      childText: this.fatherText //定义自己的变量childText
    };
  },
  methods: {
    change() {
      this.childText = "son change the test";//修改自己的变量
    }
  }
};

两个组件间更新
完成了上述代码,你会发现两个组件都改变的内容,但是只更新了自身组件的内容,如何使两个组件进行同步更新呢?

这里需要使用我的Wath方法,来进行监听传递组件的变量

<template>
  <div>
    <p class="child" @click="changeChild">{{childText}}</p>
  </div>
</template>
<script>
export default {
  name: "child",
  model: {
    prop: "fatherText", //父组件中变量的传递
    event: "changeChild" //事件传递
  },
  props: {
    fatherText: {
      type: String
    }
  },
  data() {
    return {
      childText: this.fatherText
    };
  },
  methods: {
    changeChild() {
      this.childText = "son change the test";
    }
  },
  watch: {
    fatherText(newtext) {//使用父组件中变量名为函数名,监听fatherText的变化,如果变化,则改变子组件中的值
      this.childText = newtext;
    },
    childText(newtext) {//监听子组件中childText变化,如果变化,则通知父组件,进行更新
      this.$emit("changeChild", newtext);
    }
  }
};

链接: https://www.fly63.com/article/detial/4848

vue.js $emit/$on的用法和理解_vue组件之间数据传输通信

每个 Vue 实例都实现了事件接口vm.$emit( event, arg ) 触发当前实例上的事件;vm.$on( event, fn )监听event事件后运行。实例说明:Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信,Vuejs 用$emit与$on来进行跨页面之间的数据传输通信

两个浏览器窗口间通信总结

两个浏览器窗口间通信:一个窗口更新localStorage,另一个窗口监听window对象的storage事件来实现通信;所有的WebSocket都监听同一个服务器地址,利用send发送消息,利用onmessage获取消息的变化;借助iframe 或 window.open;HTML5 中的 Web Worker 可以分为两种不同线程类型

前端跨页面通信,你知道哪些方法?

在浏览器中,我们可以同时打开多个Tab页,每个Tab页可以粗略理解为一个“独立”的运行环境,即使是全局对象也不会在多个Tab间共享。然而有些时候,我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或状态。

Vue组件之间通信的七种方式

使用Vue也有很长一段时间,但是一直以来都没对其组件之间的通信做一个总结,这次就借此总结一下。父子组件之间的通信props和$emit 父组件通过props将数据下发给props

浏览器标签页之间通信的实现

前端开发过程中,总是避免不了要进行前端标签页之间的通信,最经典的例子莫过于音乐播放网站中,当第一次点击播放列表中的歌曲时,它会打开一个新的标签页进行播放,而当在列表中再次点击歌曲播放时

基于 ThinkJS 的 WebSocket 通信详解

我们的项目是基于 ThinkJS + Vue 开发的,最近实现了一个多端实时同步数据的功能,所以想写一篇文章来介绍下如何在 ThinkJS 的项目中利用 WebSocket 实现多端的实时通信。ThinkJS 是基于 Koa 2 开发的企业级 Node.js 服务端框架

Socket是如何通信的?

其实服务器的处理和客户端大同小异,分三个逻辑分支:检索成功,用检索到的Socket来处理接收报文;检索失败,服务器侦听(listen)目的端口,创建全新的Socket服务客户;检索失败,服务器没有侦听目的端口,丢弃处理

vue父子组件通信高级用法

vue项目的一大亮点就是组件化。使用组件可以极大地提高项目中代码的复用率,减少代码量。但是使用组件最大的难点就是父子组件之间的通信。父组件通过$refs调用子组件的方法。 以上就是父子组件通信的方式

微服务的三种通信方法

在微服务架构的世界中,我们通过一系列服务构建应用。集合中的每项服务都符合以下标准:松散耦合、可维护和可测试、可以独立部署,微服务架构中的每个服务都解决了应用中的业务问题

vue 数据通信总结

数据单向流动prop react也是一样prop ; $emit / $on (任意组件间传递)创建个空的组件,来作eventbus 用来触发及监听事件 ;vuex 牛刀集中式存储管理应用的所有组件的状态

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!