美文网首页
组件与组件、页面之间的通信

组件与组件、页面之间的通信

作者: zoepasserby_ | 来源:发表于2018-08-27 15:07 被阅读0次

一、props传值

props传值在WePY中属于父组件与子组件之间(包括页面与其子组件之间)传值的一种机制,包括静态传值与动态传值。

静态传值只能传递String类型,不能传递Number、Boolean、Object等其他类型。

动态传值使用`:prop`(等价于`v-bind:prop`),子组件会接收父组件的数据。

与静态传值只能通过父组件向子组件单向传值不同,动态传值包括了单向动态传值和双向动态传值。

+  1. 单向动态传值:父组件向子组件单向动态传值(父组件可随时改变子组件中的值)。

+  2. 双向动态传值:子组件props对象中某个属性值的修改会改变父组件data对象中对应属性的值(注意,父子组件中的这两个属性其名称可以不一致,两者通过在父组件wxml中插入子组件时在子组件标签的属性中进行映射关联)。

sync,和twoWay 这里都是单向,区别是,一个是父到子,一个是子到父。

page_parent.wpy

<btnctl :selectItemId.sync="selectItemid"></btnctl>

<script>

data = {

selectItemid:'szsaaq'

}

}

onLoad( options ) {

this.selectItemid=options.id

}

}

</script>

child.wpy组件

props = {

selectItemId:{}

}

methods = {start (m) {

console.log("选择的测试题id:"+this.selectItemId)

}}

onLoad(){

console.log(this.selectItemId)//子组件onLoad方法先于父组件执行,所以是默认值

}

二、子组件传递给父组件=》页面

采用emit

child.wpy

methods = {

start (m) {

this.$emit('parentFn',this.selectItemId);

}

}

page_parent.wpy

<child @child.user="parentFn"></child>

methods={

parentFn(e){

console.log(e)

}

}

三、`$invoke`是一个组件对另一个组件的直接调用,通过传入的组件路径找到相应组件,然后再调用其方法。

`$invoke`是一个页面或组件对另一个组件中的方法的直接调用,通过传入的组件路径找到相应组件,然后再调用其方法。

①比如,想在页面`Page_Index`中调用组件btnctl中的某个方法sendMessage:

```Javascript

this.$invoke('btnctl', 'someMethod', 'someArgs');

```

②如果想在组件A中调用组件btnctl的某个方法sendMessage:

```Javascript

this.$invoke('../btnctl', 'sendMessage', this.selectItemId);

相关文章

  • 组件与组件、页面之间的通信

    一、props传值 props传值在WePY中属于父组件与子组件之间(包括页面与其子组件之间)传值的一种机制,包括...

  • vue父组件调用子组件的方法

    vue组件与组件通信有如下几种情况: 平行组件父组件与子组件子组件与父组件 它们之间通信有几种方法有: props...

  • Vue组件通信大全(终结篇)

    背景   Vue是单页面应用,单页面应用又是由组件构成,各个组件之间又互相关联,那么如何实现组件之间通信就显得尤为...

  • React的组件通信

    组件之间进行通信的情况: 父组件向子组件通信 子组件向父组件通信 兄弟组件之间通信 发布者-订阅者模式 一、父组件...

  • 老生常谈——vue组件之间通信

    老生常谈的组件之间通信 vue组件之间的通信细分为三种情况:兄弟组件之间的通信,父组件向子组件传递数据,子组件向父...

  • 小程序的数据通信

    一、页面与组件通信 1.页面传递内容给组件 page为页面的属性名 components 为组件的外部属性名, 用...

  • react之组件通信

    需要组件之进行通信的几种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件通信 没有嵌套关系组件之间的通信 ...

  • Vue.js--组件通信

    vue组件之间的通信包括三种: 1.父组件向子组件通信 2.子组件向父组件通信 3.同级组件之间的通信 首先,看一...

  • React组件通信的几种方式

    需要组件之进行通信的几种情况 父组件向子组件通信 子组件向父组件通信 跨级组件通信 没有嵌套关系组件之间的通信 1...

  • React中组件通信的几种方式

    需要组件之进行通信的几种情况 父组件向子组件通信 子组件向父组件通信 跨级组件通信 没有嵌套关系组件之间的通信 1...

网友评论

      本文标题:组件与组件、页面之间的通信

      本文链接:https://www.haomeiwen.com/subject/jvzmvxtx.html