Vue父子组件通信实践

组件(Component)是Vue.js的核心部分,组件的作用域是孤立的,所以不能在子组件模板内直接引用父组件的数据,但是组件之间的通信是必不可少的。组件A在其模板中使用了组件B,A组件要向B组件传递数据,B组件要将其内部发生的事情告知A组件,那么A、B组件怎么进行通信呢?

Vue.js父子组件的关系可以总结为props down,events up,父组件通过props向下传递数据给子组件,子组件通过events给父组件发送消息,它们的工作方式如下图所示:

父组件 - 子组件:父组件传值给子组件使用Props属性。

子组件 - 父组件:子组件传值给父组件使用Emit事件。

1. 父组件通知子组件

props是父组件用来向子组件传递数据的一个自定义属性,子组件需要显示的用props属性声明要传递的参数。

父组件向子组件index-header传递showDate参数。


1

<index-header :showDate="showDate"></index-header>


1

2

3

4

5

6

7

8

9

10

export default {  

  data() {  

    return {  

      showDate: true

    }  

  },  

  components: {  

    ‘indexHeader‘: IndexHeader  

  }  

}

子组件配置showDate参数。


1

2

3

export default {  

  props: [‘showDate‘]  

}

props是单向绑定的,当父组件的showDate属性变化时,会传递给子组件,但是不会反过来,防止子组件无意修改父组件的状态。每次父组件更新时,子组件所有的props参数都会异步更新为最新值。

由于子组件的props参数值是异步更新的,所以在子组件methods里使用props参数要注意参数值是否是最新值。最近开发遇到一个问题,主组件传值给子组件并调用子组件的方法,方法里有用到props的参数值,每次调用方法里的props参数值都是上一次的值,就是因为props异步更新导致的,可以采用下面两种方法解决:

① 使用$nextTick,在数据变化之后等待 Vue 完成更新 DOM

父组件向子组件传递filterParam参数,并调用子组件的getDimData()方法,参数如果是驼峰的形式,才传参时需要改为‘‘-‘’的方式。


1

<channel ref="child" :filter-param="filterParam"></channel>


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

export default {  

  data() {  

    return {  

      filterParam: {}  

    }  

  },  

  components: {  

    ‘channel‘: Channel  

  },  

  methods: {  

    getFilterParam(filterParam) {  

      this.filterParam = filterParam;  

 this.$nextTick(() => {  

        this.$refs.child.getDimData();  

      });  

    }  

  }  

}

子组件配置filterParam参数,并在getDimData()方法中使用。


1

2

3

4

5

6

7

8

9

10

11

12

13

export default {  

  props: [  

    ‘filterParam‘

  ],  

methods: {  

    getDimData() {  

      let param = {  

        "date: this.filterParam.filterTimeCur,  

        "channelCur": this.filterParam.ChannelCur  

      };  

console..log(param);  

    }  

}

② 监听参数变化

父组件向子组件传递filterParam参数,并调用子组件的getDimData()方法。


1

<channel ref="child" :filter-param="filterParam"></channel>


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

export default {  

  data() {  

    return {  

      filterParam: {}  

    }  

  },  

  components: {  

    ‘channel‘: Channel  

  },  

  methods: {  

    getFilterParam(filterParam) {  

      this.filterParam = filterParam;  

    }  

  }  

}

子组件监听filterParam的变化。


1

2

3

4

5

6

7

8

9

10

11

12

13

export default {  

  props: [  

    ‘filterParam‘

  ],  

watch: {  

    filterParam() {  

      let param = {  

        "date: this.filterParam.filterTimeCur,  

        "channelCur": this.filterParam.ChannelCur  

      };  

console..log(param);  

    }  

}

2. 子组件通知父组件

子组件通过$emit自定义事件通知父组件,父组件通过v-on来监听子组件触发的事件,代码实例如下:

父组件监听子组件传递参数getFilterParam。


1

<index-header v-on:filterParam="getFilterParam" :showDate="showDate"></index-header>


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

export default {  

  data() {  

    return {  

      filterParam: {},  

      showDate: true,  

    }  

  },  

  components: {  

    ‘channel‘: Channel  

  },  

  methods: {  

    getFilterParam(filterParam) {  

      this.filterParam = filterParam;  

      this.$nextTick(() => {  

        this.$refs.child.getDimData();  

      });  

    }  

  }  

}

子组件向父组件传递参数filterParam。


1

2

3

4

5

6

7

8

9

10

11

export default {  

data() {  

dateCur: ‘today‘,  

 filterMainCur: ‘channel‘,  

},  

methods: {  

    this.$emit(‘filterParam‘, {  

    filterTimeCur: this.dateCur,  

        filterMainCur: this.filterMainCur  

      });  

}

Reference:

时间: 2024-10-07 12:15:08

Vue父子组件通信实践的相关文章

Vue父子组件通信

我们在开发过程中,不可能只在一个组件里面写东西,当一个组件的内容过多时候,我们会把各个块的内容分别作为一个单独的组件分离出去,这些分离出去的组件被叫做子组件,但是一般请求数据的话还是在父组件(最大的外层中)钟情求,这就要求我们要将父组件中的数据传给各个子组件,子组件才能通过v-for指令进行遍历,遍历之后再通过item将数据传给比自己更小的子组件,这样以此类推,最后的小组件再来展示数据,组件开发中不可能因为某个小组件而单独发一次请求,这就需要用到组件之间的通信 通常情况下子组件是不能直接访问父组

Vue父子组件及非父子组件如何通信

1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: 子组件通过props来接收数据: 方式1: 方式2 : 方式3: 这样呢,就实现了父组件向子组件传递数据. 2.子组件与父组件通信 那么,如果子组件想要改变数据呢?这在vue中是不允许的,因为vue只允许单向数据传递,这时候我们可以通过触发事件来通知父组件改变数据,从而达到改变子组件数据的目的. 父组件: 3.非父子组件通信 如果2个组件不是父子组件那么如何通信呢?这时可以通过eventHub来实现

【转】vue父子组件之间的通信

vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使用,遇到业务逻辑操作时子组件触发父组件的自定义事件.无论哪种组织方式父子组件的通信方式都是大同小异. 父组件到子组件通讯 父组件到子组件的通讯主要为:子组件接受使用父组件的数据,这里的数据包括属性和方法(String,Number,Boolean,Object, Array ,Function).v

Vuejs——(10)组件——父子组件通信

版权声明:出处http://blog.csdn.net/qq20004604 目录(?)[+] 本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html#u7236_u5B50_u7EC4_u4EF6_u901A_u4FE1 本文是在官方文档的基础上,更加细致的说明,代码更多更全. 简单来说,更适合新手阅读 (二十七)父子组件通信 ①访问子组件.父组件.根组件: this.$parent    访问父组件 this.$children   访问子

从$emit 到 父子组件通信 再到 eventBus

故事还是得从$emit说起,某一天翻文档的时候看到$emit的说明 触发当前实例上的事件?就是自身组件上的事件呗,在父子组件通信中,父组件通过props传递给子组件数据(高阶组件可以用provide和inject),由于这是单向数据流,为了保证复用组件的的时候出现数据错乱. 那么只能通过在子组件里面去触发一个事件,来让父组件自己更新数据. 那么问题来了,$emit不是说好的触发当前实例上的事件吗?那是怎么去能触发父组件数据更新的呢?难道父组件里也能$on对应的事件??? 其实不是的,看下面这个示

Vue 父子组件传值 props

1.Vue 的渲染周期: vue 如何实现响应式追踪. 父子组件通信有很多方式,今天单独聊下props 的方式.我们通过查找官方文档很容发现,props传值有静态和动态两种传值方式. 当然props 还提供许多验证,使数据更加严谨. 在使用父子传值时,出现了, 按照文档说明,例如: 1 <template> 2 <div v-if="data">{{parentName}} 3 4 <input type="text" v-model=

Vue父子组件传值

 Vue父子组件传值:有四种方式:props,ref,emit 和模板传递通信slot 通过props来传值: 静态传值就是直接通过props来传递 动态传值是通过v-bind来绑定一个要传递值的key,然后后面跟要传递的内容,不过这个内容是可以改变的 比如: <input v-model="parentMsg"> <child v-bind:message="parentMsg"></child> 传递的值会跟着input里面输

父子,子父,非父子组件通信

父子组件通信 父亲的数据给子集 父组件向子组件传值 ??? 子组件在props中创建一个属性,用于接收父组件传过来的值: ??? 父组件 引入子组件-->注册子组件-->引用子组件: ??? 在子组件标签中添加子组件props中创建的属性: ??? 将所要传递的值赋值给该属性. props: prop类型:通常你希望每个prop都有指定的数据类型,你可以以对象的形式列出prop,对象的属性的名称和值分别对应了prop的值和类型. 单向数据流:所有的prop都使得其父子prop形成一个单向数据流

vue父子组件之间传值

vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种vue-cli搭建的同理 父组件通过 v-bind:属性名(自定义的) = "要传递的数据" 子组件通过 props:["属性名"]  这个属性名就是父组件传递过来的数据信息 <div id="app"> <mod :abc=&qu