微信小程序 自定义组件 数据传递 交互

   微信小程序 数据交互

1. 关于怎么定义组件这里就不说了，这里主要介绍数据见交互，以及方法互调。
   
   
2.  自定义属性

   properties: {
       nbaName: String,
     },

   自定义方法

    methods: {
       onLoad() {
        
       }
     }

    

3. 引入自定义组件 
    

   <!-- 引用组件的页面模版 -->
   <view>
     <my-component nbaName="{{name}}" bindshowFunction="showFunction" id ="nba">
       <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
         <view bindtap='nba'>点击弹出传入的名字</view> 
     </my-component>
   </view>

    

4. 自定义组件调用 page 方法

   onLoad() {//onLoad 是自定义组件的方法
   
        /**
         * 调用page页面的方法，并且传入数据
         *showFunction 是需要绑定的方法   this.data.nbaName 是自定义自定义组件向page页面传递的数 
         *据，如果是多个数据可以以对象的形式传入
         */
         this.triggerEvent('showFunction', this.data.nbaName);
       }

    

5. page页面调用自定义组件的 属性和方法
    

     var nba = this.selectComponent("#nba");
       wx.showToast({//获取自定义属性
         title: nba.data.nbaName,
       })
   
       nba.onLoad();//调用自定义组件的方法

    

   ---