uniapp Vue2 子组件给父组件传值

简介: uniapp Vue2 子组件给父组件传值

子组件

<template>
 <view>
    <button @click="sendValue">点击发送值</button>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        zhi:'子的值'
      }
    },
    onLoad() {
    },
    watch: {
    },
    methods: {
sendValue() {
      this.$emit('myevent', this.zhi);
    }
    },
  }
</script>
<style>
</style>

父组件

<template>
  <TC-WXlogin @myevent="handleEvent" />
</template>
<script>
  import TCWXlogin from '/uni_modules/TC-WXlogin/pages/index.vue';
  export default {
    components:{
    TCWXlogin 
    },
    data() {
      return {
      }
    },
    onLoad() {
    },
    methods: {
       handleEvent(value) {
            console.log(value); // 输出子的值
      }
    }
  }
</script>
<style>
</style>
相关文章
|
3月前
|
JavaScript API
vue使用hook:声明周期来监听子组件的声明周期
本文介绍了如何在Vue中使用生命周期钩子来监听子组件的生命周期事件,包括在子组件内部监听和在父组件中监听子组件的生命周期钩子。
52 0
|
3月前
|
JavaScript
Vue组件传值异步问题--子组件拿到数据较慢
Vue组件传值异步问题--子组件拿到数据较慢
252 58
|
2月前
|
JavaScript
Vue 的父组件和子组件生命周期钩子执行顺序
在 Vue 中,父组件和子组件的生命周期钩子执行顺序如下:
|
2月前
|
监控 JavaScript 开发者
在 Vue 中,子组件为何不可以修改父组件传递的 Prop,如果修改了,Vue 是如何监控到属性的修改并给出警告的
在 Vue 中,子组件不能直接修改父组件传递的 Prop,以确保数据流的单向性和可预测性。如果子组件尝试修改 Prop,Vue 会通过响应式系统检测到这一变化,并在控制台发出警告,提示开发者避免这种操作。
|
3月前
|
JavaScript
Vue在子组件中判断父组件是否传来事件
本文介绍了在Vue中如何通过`vm.$listeners`对象来判断父组件是否传递了特定的事件给子组件,并展示了如何检查事件是否存在以及相应的处理方法。
210 0
Vue在子组件中判断父组件是否传来事件
|
7月前
|
JavaScript
Vue有关子组件向父组件传值问题(已解决)
Vue有关子组件向父组件传值问题(已解决)
56 0
|
5月前
|
JavaScript
|
5月前
uniapp实战 —— 弹出层 uni-popup (含vue3子组件调父组件的方法)
uniapp实战 —— 弹出层 uni-popup (含vue3子组件调父组件的方法)
602 1
|
5月前
|
JavaScript
vue 父组件修改子组件的样式——深度作用选择器 >>> 、 /deep/ 、 ::v-deep
vue 父组件修改子组件的样式——深度作用选择器 >>> 、 /deep/ 、 ::v-deep
214 0
|
5月前
|
JavaScript 搜索推荐
vue【详解】props —— 子组件接收父组件传入的参数
vue【详解】props —— 子组件接收父组件传入的参数
61 0