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

场景：多个页面使用 UI画面基本一致

举个栗子：拿多个页面 都有搜索框 点击跳搜索页面

实施：

        创建公用组件页面 search

        search.wxml    

        <view class="search">

          <view class="search-inputView flex-align-center" bindtap="callFather">

            <image src="/assets/icons/icon_fd.png" bindtap="jumpsearch"></image>

            <input placeholder="{{inputValue}}" value="" disabled></input>

          </view>

        </view>

        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: 'default value',

    }

  },

  data: {

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

    someData: {}

  },

  created() {

    console.log('被使用了~~~')

  },

  methods: {

    jumpsearch: function() {

      wx.navigateTo({

        url: '/pages/search/search'

      })

    },

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

    callFather: function (e) {

      this.triggerEvent('callFather', e) //callFather自定义名称事件，父组件中接收

    },

  }

})

 

---

       使用组件页面

        index.wxml

        <search inputValue="{{placeholderValue}}"  bind:callFather ="callFather"></search>

         index.json

        {

            "navigationBarTitleText": "首页",

           "usingComponents": {

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

              }

        }

        index.js

        Page({

          data: {placeholderValue:'哈哈哈'},

           callFather (e){

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

            }    

        })

            注释：公用组件的css 是独立的  没法调用到app.css 的class