@[TOC]
⭐ 前言
大家好，我是yma16，不止前端，本文将介绍微信小程序的组件传值。
⭐ 开始
组件引入（usingComponents）
在组件的json配置文件usingComponents添加一个key value
key为组件引用名称，value为组件的路径引入
{
"usingComponents": {
"home-content": "/pages/homeContent/homeContent",
}
}
父组件往子组件传值（attribute）
在组件的tag标签中添加属性
例如：往子组件的home-content传递content变量给子组件内的属性headerItem
<home-content headerItem='{
{content}}'></home-content>
子组件定义data的headerItem变量
Component({
/**
*组件的初始数据
*/
data: {
homeHeaderItem:''
}
})
子组件往父组件传值（triggerEvent）
子组件使用triggerEvent 往父组件传值
// 触发父组件事件
this.triggerEvent('updateArticleMenu', 'data')
标签绑定的事件
bind: eventName=eventName
<home-content bind:updateArticleMenu="updateArticleMenu"></home-content>
父组件定义事件updateArticleMenu接受子组件的事件触发
function updateArticleMenu(e){
// 事件定义
}
页面结构图
⭐ 对比vue2的组件传值思考
1.vue的父组件往子组件home-content传值
<home-content :headerItem="content"/>
2.vue子组件触发事件updateArticleMenu
this.$emit("updateArticleMenu")
@ eventName=eventName
<home-content @updateArticleMenu="updateArticleMenu"/>
总结：小程序的传值和vue的传值用法差异不大
⭐结束
感谢阅读，如有错误欢迎指出！
