评论

收藏

[PHP] uniapp & vue 父子、子父、兄弟组件之间的传值

开发技术 开发技术 发布于:2023-02-08 11:14 | 阅读数:234 | 评论:0

以下组件传值适用于uniapp和vue。具体代码如下所示:

一、父子组件传值
父传子的关键:父组件在标签上传递,子组件通过props接收。

1.父组件中(传递)
//1引入子组件
import zizujian from '@/components/login.vue'

//2注册子组件
export default {
    components: {
        zizujian 
    },
}

//3在template中以标签的形式载入,通过数据绑定的形式进行传值
<zizujian :userinfo="this.userinfo"></zizujian >
2.子组件中(接收)
//1通过props接收父组件传过来的值
props:['userinfo']

//2在标签中直接使用
<view>{{userinfo}}</view>

二、子父组件传值
子传父的关键:子组件通过事件 this.$emit来向父组件传值。

1.子组件中:(传递)
//1通过事件传值
<view @click="sonlick">点击按钮</view>
<script>
export default{
    methods:{
        //2点击事件-向父组件传值
        sonlick(){
             this.$emit("sendData",this.userinfo)
        },
    }
}
</script>
2.父组件中:(接收)
//1引入子组件
<script>
import zizujian from '@/components/login.vue'

export default {
    //2注册子组件
    components: {
        zizujian 
    },
    
    methods:{
        //3通过事件接收
        getSonData(res){
            console.log('子组件的内容',res)
            this.avatarUrl = res.avatarUrl
            this.nickName = res.nickName
        },
    }
}
</script>

//4在template中以标签的形式载入
<zizujian @sendData="getSonData"></zizujian >

三、兄弟组件传值
**组件之间的传值,完全可以通过自定义事件中心,避免多个组件参与传递数据的复杂度!

1.定义事件中心 src/utils/events.js,在两个兄弟组件中同时导入(主要用于数据传递)
**
 * 自定义事件中心
 *   events.js
 */
import Vue from "vue"
 
const vm = new Vue()
 
export default vm
2.组件A发送数据
<template>
    <button @click="sendData2">
    发送数据给其他组件
  </button>
</template>
 
<script>
// 导入事件中心
import vm from "../utils/event"
  
export default {
  data() {
    return {
      msg: "子组件数据"
    }
  },
  methods : {
    sendData2() {
      // 事件中心 触发自定义事件
      vm.$emit("customEvent", this.msg)
    }
  }
}
</script>
3.组件B接收数据
<template>
    <p>
    等待接受数据:{{ }}
  </p>
</template>
 
<script>
// 导入事件中心
import vm from "../utils/event"
  
export default {
 
  created() {
    // 组件加载的时候执行函数,监听自定义事件
    this.getData();
  },
  data() {
    return {
      dataFromOther: "等待接受"
    }
  },
  methods: {
    getData() {
      vm.$on("customEvent", value => {
        // 接受自定义事件传递的数据
        this.dataFromOther = value
      })
    }
  }
}
</script>


关注下面的标签,发现更多相似文章