【微信小程序】父子组件之间传值-Toy模板网

这篇具有很好参考价值的文章主要介绍了【微信小程序】父子组件之间传值。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

微信小程序父子组件之间传值有两种：

1.1 在父组件的.json文件中导入子组件

  "usingComponents": {
    "childpart":"/components/childpart/childpart",
  }

1.2 在子组件的.json文件中，把自己定义为子组件

{
 "component": true,
}

2. 1 在父组件的wxml中，子组件进行引用：

给组件起的自定义名字是 childpart ,渲染的时候在父组件里写上一组 <childpart></childpart> 标签，就可以把子组件渲染到父组件。

2.2 我们在父组件.js文件的数据data 中定义两个数据，nameValue:'lizi', ageValue:18

 data: {
      nameValue:"lizi",
      ageValue:18
    },

2.3 在父组件的wxml文件中把这个数据传递给子组件 childpart。绑定属性值( name,age)，并传递想要给子组件的值( nameValue,ageValue)

<childpart name="{{nameValue}}" age="{{ageValue}}"></childpart>

3. 在子组件中的js中使用 properties 获取值，这样就可以在子组件中用获取到这个值了

 // 接受父组件传递过来的值
  properties: {
    name:{
      type:String,
      value:''
    },
    age:{
      type:Number,
      value:''
    }
  },

4. 可以在子组件的wxml页面中引用看看是否传递成功了

小程序父子传参,微信小程序,小程序,前端

父组件页面显示如下：

小程序父子传参,微信小程序,小程序,前端

1. 先在子组件childpart.js的data 数据中定义一个数据 msg:

 data: {
    msg:'我是子组件的值'
  },

2. 在子组件wxml 中放一个按钮，并绑定一个事件 sendMsg

<!-- 点击按钮向父组件传值 -->
<button bindtap="sendMsg">点击按钮向父组件传值</button>

3. 在childpart.js中定义一下这个sendMsg ，并传值：

 methods: {
    sendMsg(){
      this.triggerEvent('sendMsg',this.data.msg)
    }
  },

4. 传值使用的是 this.triggerEvent() ，sendMsg 就是传递给父组件的自定义事件名称，然后在父组件中绑定一下这个事件bindsendMsg="sendMsg"

<childpart name="{{nameValue}}" age="{{ageValue}}" bindsendMsg="sendMsg"></childpart>

5.在父组件的 js 文件中定义sendMsg方法，并传递事件对象 e

 // 父组件接受子组件传递过来的值
  sendMsg(e){
    console.log(e.detail);
  },

子组件传递过来的值使用 e.detail就可以获取到了
文章来源地址https://www.toymoban.com/news/detail-592559.html

到了这里，关于【微信小程序】父子组件之间传值的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！