正文

vue2.0组件间数据传递

家光smile<  家光smile<  2022-08-20  338

关键词：

Vue1.0组件间传递

　　使用$on()监听事件；
　　使用$emit()在它上面触发事件；
　　使用$dispatch()派发事件，事件沿着父链冒泡；
　　使用$broadcast()广播事件，事件向下传导给所有的后代

Vue2.0后$dispatch()，$broadcast()被弃用，见https://cn.vuejs.org/v2/guide/migration.html#dispatch-和-broadcast-替换

1，父组件向子组件传递场景：Father上一个输入框，根据输入传递到Child组件上。

父组件：

<template>
  <div>
    <input type="text" v-model="msg">
    <br>
    //将子控件属性inputValue与父组件msg属性绑定
    <child :inputValue="msg"></child>
  </div>
</template>
<style>

</style>
<script>
  export default{
    data(){
      return {
        msg: ‘请输入‘
      }
    },
    components: {
      child: require(‘./Child.vue‘)
    }
  }
</script

子组件：

<template>
  <div>
    <p>{{inputValue}}</p>
  </div>
</template>
<style>

</style>
<script>
    export default{
        props: {
          inputValue: String
        }
    }
</script>

2，子组件向父组件传值场景：子组件上输入框，输入值改变后父组件监听到，弹出弹框

父组件：

<template>
  <div>
//message为子控件上绑定的通知；recieveMessage为父组件监听到后的方法
    <child2 v-on:message="recieveMessage"></child2>
  </div>
</template>
<script>
  import {Toast} from ‘mint-ui‘
  export default{
    components: {
      child2: require(‘./Child2.vue‘),
      Toast
    },
    methods: {
      recieveMessage: function (text) {
        Toast(‘监听到子组件变化‘+text);
      }
    }
  }
</script>

子组件：

<template>
  <div>
    <input type="text" v-model="msg" @change="onInput">
  </div>
</template>
<script>
  export default{
    data(){
      return {
        msg: ‘请输入值‘
      }
    },
    methods: {
      onInput: function () {
        if (this.msg.trim()) {
          this.$emit(‘message‘, this.msg);
        }
      }
    }
  }
</script>

vue2.0子组件能不能修改父组件传递过来的数据

参考技术A父组件传弟子组件是单向数据绑定;子组件不能直接修改父组件的数据，可以间接修改数据1：子组件通过computed计算属性来修改父组件传递的值2:子组件通过data修改父组件传递过来的数据，把传递过来的数据作为data中局... 查看详情

vue2.0实战项目组件间通信的方法

Vue组件之间通信分为三种情况：父组件向子组件通信、子组件向父组件通信、兄弟组件间通信。一.父组件向子组件通信通过props可以将值传递给子组件<template><divid="app"><child:m... 查看详情

通信vue2.0组件

Props在vue组件中各种角色总结在Vue中组件是实现模块化开发的主要内容，而组件的通信更是vue数据驱动的灵魂，现就四种主要情况总结如下：使用props传递数据---组件内部//html<divid="app1"><i>注意命名规定：仅在html内使用my... 查看详情

vue2.0父子组件以及非父子组件如何通信

1.父组件传递数据给子组件父组件数据如何传递给子组件呢？可以通过props属性来实现父组件：<parent><child:child-msg="msg"></child>//这里必须要用-代替驼峰</parent>data(){return{msg:[1,2,3]};}子组件通过props来接收数据: ... 查看详情

vue2.0父子组件以及非父子组件如何通信

1.父组件传递数据给子组件父组件数据如何传递给子组件呢？可以通过props属性来实现父组件：<parent><child:child-msg="msg"></child>//这里必须要用-代替驼峰</parent>data(){return{msg:[1,2,3]};} 子组件通过props来接收... 查看详情

vue2.0学习之组件间通信

/*child.vue*/ 子组件 <template> <div> /*必须要用div包裹起来，然后在里面写需要的组件内容，这里面和平常写的html是一样的*/ <div> </template> <script> /*这里面写vue*/ /*引入其他vue组件*/ @importheaderfrom"./heade 查看详情

vue2.0入门系列——父子组件间通信

1、子组件更新，父组件不变点击“按钮”按钮，子组件数据被修改，父组件数据不变 =========>>>>>> 项目源代码，<head> <metacharset="UTF-8"> <title>v2.0父子组件通信</titl... 查看详情

vue2.0父子组件以及非父子组件通信

官网API: https://cn.vuejs.org/v2/guide/components.html#Prop一、父子组件通信1、父组件传递数据给子组件，使用props属性来实现传递普通字符串父组件：<childmessage="hello!"></child>子组件：Vue.component(‘child‘,{//声明propsprops:[‘messag 查看详情

vue2.0父子组件之间的双向数据绑定问题解决方案

...2.0，那么之后项目代码就完全奔溃不能运行，vue2.0在父子组件数据绑定的变化(不再支持双向绑定)颠覆了1.0的约定，很遗憾。解决方案只有两种：1)父子组件之间通过vue事件机制传递数据，这太麻烦，而且可能会遇到问题。2)不用... 查看详情

vue2.0非父子间进行通讯

在vue中，父组件向之组件通讯使用的是props，子组件向父组件通讯使用的是$emit+事件，那非父子间的通讯呢，在官方文档上只有寥寥数笔，概念很模糊，这个空的vue实例应该放在哪里呢，光放文档并没有明确的描述，经过查证一... 查看详情

vue2.0—组件的自定义事件（十八）(代码片段)

【Vue2.0】—组件的自定义事件（十八）<template><div><h2>msg</h2><School:getName="getName"/><Student:getStudentname="... 查看详情

vue2.0父子组件通信

一、父组件传递数据给子组件（ parent ==》children ）props 属性》parent组件 parent.vue<parent><child:child-msg="msg"></child>//这里必须要用-代替驼峰</parent>data(){return{msg:[1,2,3]}; 查看详情

初识vue2.0：vuex组件通信

...可以做项目了，后来发现不行；一个网页被切分成若干个组件，组件之间是需要数据传递的，因此引入了vuex这个集中式存储、管理的状态管理模式。1，安装vuex：npminstall--savevuex 在main.js中引入：importVuexfrom‘vuex‘Vue.use(Vuex)2... 查看详情

vue2.0父子组件以及非父子组件如何通信

1.父组件>>>子组件父组件数据如何传递给子组件呢？可以通过props属性来实现父组件：<parent><child:child-msg="msg"></child>　　//这里必须要用-代替驼峰</parent>data(){return{msg:[1,2,3]};} 子组件通过props来接收数... 查看详情

vue2.0父子组件间事件派发机制(代码片段)

从vue1.x过来的都知道，在vue2.0中，父子组件间事件通信的$dispatch和$broadcase被移除了。官方考虑是基于组件树结构的事件流方式实在是让人难以理解，并且在组件结构扩展的过程中会变得越来越脆落。特别是在组件层级比较深的... 查看详情

vue2.0父子组件通信的方法

vue2.0组件通信方法：props传值和emit监听。（.sync方法已经移除。详情请点击）（dispatch-和-broadcast方法也已经废弃）props方法传值：Props现在只能单项传递。为了对父组件产生反向影响，子组件需要显式地传递一个事件而不是依赖... 查看详情

vue2.0学习—全局事件总线globaleventbus（六十一）(代码片段)

...十一）知识回顾：全局事件总线(GlobalEventBus)一种组件间通信的方式，适用于任意组件间通信安装全局事件总线：使用事件总线：接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事... 查看详情

vue2.0笔记——组件3(代码片段)

非父子组件之间的通信非父子关系的两个组件之间也需要通信。在简单的场景下，可以使用一个空的Vue实例作为事件总线。这句话呢是官网原话，我们看官网的说明和例子。其通信的方法还是，触发与监听事件的方式，与子向父... 查看详情