微信小程序、uniapp、Taro事件绑定和组件通信以及路由跳转的区别

微信小程序、uniapp、Taro事件绑定和组件通信以及路由跳转的区别

微信小程序(微信小程序语法)

双引号内嵌双大括号语法"{ {}}"

基本语法

• wx:for="{ {}}"
• wx:key="" (此处不加{ {}}))
• wx:for-item=""
• 小程序根元素为page

修改data中的数据 this.setData({…})

事件绑定

• 绑定事件: bindtap–>轻触 (绑定事件不加{ {}})
  • bindtap catchtap (会阻止事件冒泡)
  • 事件函数要写在methods中
• 事件传参 data-

   <!-- 绑定事件,在标签中用data-的形式添加参数 -->
  <view bindtap="toDetail"  data-proid=" {
        {item.proid}}"></view>
  

  methods: {
       
  toDetail(event){
       
      //在事件对象中通过event.currentTarget可以获得data-...传过来的值
      const {
       proid} = event.currentTarget.dataset
      let pro=proid.slice(1)
          wx.navigateTo({
       
              url: '/pages/detail/detail?proid='+pro,
          })
      }
  }
  

自定义组件及父子组件通信

1. 自定义组件

   • 定义

     // 组件.json文件
     {
            
         "component": true,
         "usingComponents": {
            }
     }
     

   • 引入

     //页面.json文件
     {
            
         "navigationBarTitleText": "首页",
         "enablePullDownRefresh": true,
         "usingComponents": {
            
             "prolist": "/components/prolist/prolist" //组件名:路径
         }
     }
     
     //使用
     <prolist prolist="{
            {prolist}}"></prolist>
     

2. 组件通信(父子通信)

   // 父组件给子组件传参
   <prolist prolist="{
        {prolist}}"></prolist>