微信小程序中父子组件额度传值问题,以及添加事件方法

1.在子组件中的js文件中配置对应api

 properties: {
  //继承父组件属性的数据
  title:{
    type:String,
    value:'默认标题'
  }
},
//type是属性累心,value是默认的值 

2.此时需要再wxml文件中获取js中文件的数据

<!-- 获取js中文件的数据 -->
<view class='header-top'>{{title}}</view>

3.在父组件中的对应操作

//组件中配置title属性,传入定义组件js文件中的值,或者在花括号中直接写值进行传递
1.html文件中
<header title="{{title}}"></header>
2.js文价中
 data: {
   foodList:[],
   HOST:config.HOST,
   title:'我是头部'
 },

4.在自组价中添加方法

//1.首先在wxml文件中添加事件的标签
<view class='header-top'>

{{title}}
<button size='mini' bindtap="run">点我执行方法</button>
</view>
/*2.再在js文件中添加对应的方法,此时需要注意compenent中的问价与
pages中问价方法位置书写不同,pages中文件方法是直接书写,而component
中的方法是写在methods中的这与vue有些类似
*/
  methods: {
    run() {
      console.log("can you tell me")
    }
  }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容