小程序中的组件通信简单实例

小程序中也有组件通信，那么如何实现呢？今天我们就一起来学习学习
组件通信就是：子传父，父传子，和兄弟传值

1. 首先来说说父传子

小程序中的父传子和vue中的父传子很相似

1.1首先创建一个组件：在子组件文件夹上–右建–选择【新建component】选项

1.2引入组件，在父组件中的json文件的usingComponents添加要使用的子组件

1.3父组件中引入子组件，给子组件添加属性

   <view>
		<Child title="好好学习，天天向上"/> 
	</view>

1.4在子组件的js文件的properties中接受传过来的值
格式为：

  properties: {
     title:{
       type:String,  //接受的值的类型
       value:"你是渣渣？"  //默认值，如果父组件没给子组件传值，页面上显示该数据
    
     }
  },
简易版：properties: { 
          title:String 
       }

1.5在子组件的wxml中操作

<view>
    <view>我们都是祖国的花朵</view>  //这是我页面上自己写的东西，忽略一下
    <view>
         {{title}}   //将从组件中接收的值渲染到页面
    </view>
</view>

效果如下：

大致就是这样啦，不是很难，大家需要顺一下思路

2.接下来说子传父

小程序的子传父和vue也很相似，接下来我们说说具体步骤
1.在子组件中触发一个事件

<view>
     <button bindtap="toFatherevent">
        点我把子组件的值传给父组件
     </button>
</view>

2.接下来在子组件的js中对应的toFatherevent上添加派发的事件和要向父级传递的数据

  methods: {
    toFatherevent(){
      this.triggerEvent('tofather','我想把我的值传给我的爸爸')
    },
  }

3.父组件监听子组件派发过来的事件和要接收的数据
格式为：bind要监听的事件名=“回调方法”

	<view>
		<Child  bindtofather="giveme" />
	</view>

4.在父组件的js中通过giveme事件获取数据

  data: {
    title:""  //定义一个属性
  },

  giveme(e){
   console.log(e.detail) //在控制台输出我们想接收的值 
   this.setData({
    title:e.detail  //更新数据
   })
  },

在页面中展示：

	<view>
		<Child  bindtofather="giveme" />
		{{title}}//渲染到视图上
	</view>

最终效果图如下：

3.最后来思考兄弟传值

兄弟传值：就是前两者的结合
假如两个子组件为A1,A2，另一个父组件为B

• 让组件A1利用子传父将值传给B，具体步骤如上
• B接收A1传过来的值，然后利用父传子将值传给A2，具体步骤如上
• 最后在A2中接收即可

小程序中的兄弟传值的思路和react又很相似！大家试着操作操作嗯
今天就讲到这了，大家可以思考一下兄弟如何传值哦！