【微信小程序开发】自定义组件子组件传父组件父组件传子组件

场景&＃xff1a;多个页面使用 UI画面基本一致

举个栗子&＃xff1a;拿多个页面 都有搜索框 点击跳搜索页面

实施&＃xff1a;

        创建公用组件页面 search

        search.wxml    

        search.css

        .search {position: fixed;top: 0;z-index: 1001;width: 100%; background: #fff; left: 0;font-size: 28rpx;}

        .flex-align-center{display: flex;align-items: center}

        .search-inputView { width: 92%;box-sizing: border-box; margin: 20rpx 0;margin-left: 4%; height: 70rpx;line-height: 70rpx;

              background: rgba(245, 247, 252, 1);padding: 0 30rpx; border-radius: 45rpx;}

        .search-inputView input {width: 85%;margin-left: 10rpx; margin-right: 20rpx;}

        .search-inputView image {width: 35rpx;height: 35rpx;}

        .scroll-view {position: fixed;top: 180rpx;left: 0;z-index: 10002;}

        search.js

Component({

  properties: {

    inputValue: {

      type: String,

      value: &＃39;default value&＃39;,

    }

  },

  data: {

    // 这里是一些组件内部数据

    someData: {}

  },

  created() {

    console.log(&＃39;被使用了~~~&＃39;)

  },

  methods: {

    jumpsearch: function() {

      wx.navigateTo({

        url: &＃39;/pages/search/search&＃39;

      })

    },

    // 子组件点击 传递参数到父组件 调用父组件事件 

    callFather: function (e) {

      this.triggerEvent(&＃39;callFather&＃39;, e) //callFather自定义名称事件&＃xff0c;父组件中接收

    },

  }

})

       使用组件页面

        index.wxml

         index.json

        {

            "navigationBarTitleText": "首页",

           "usingComponents": {

                  "search": "../public/search",

              }

        }

        index.js

        Page({

          data: {placeholderValue:&＃39;哈哈哈&＃39;},

           callFather (e){

            console.log(e)//父组件接收 子组件传递的参数

            }    

        })

            注释&＃xff1a;公用组件的css 是独立的  没法调用到app.css 的class