vue 父组件给子组件传值及父组件触发子组件事件

最新推荐文章于 2024-08-18 13:53:12 发布

至少零下七度

最新推荐文章于 2024-08-18 13:53:12 发布

阅读量1k

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/mqq_12/article/details/107668340

版权

vue 专栏收录该内容

22 篇文章

订阅专栏

本文详细介绍了在Vue中如何从父组件向子组件传递数据，以及如何在父组件中触发子组件的方法，涵盖基本使用及实践案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件

<template>
  <div>
    <!-- 顶部导航 -->
    <topNav
      title="XXX"
      @click="goBack"
      ref="child"
    ></topNav>
  </div>
 </template>
 <script>
import topNav from '../../components/topNavbar'
export default {
  components: { topNav },
  data() {
    return {
    }
  }
  methods: {
    goBack() {
      this.$refs.child.onClickLeft()
    }    
  }
}
</script>

子组件

<template>
  <div>
    <van-nav-bar
      :title="title"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    >
    </van-nav-bar>
  </div>
</template>
<script>
export default {
  name: 'topNav',
  props: {
    title: String
  },
  data() {
    return {

    }
  },
  methods: {
    onClickLeft() {
      console.log('我是子组件的方法')
      let that = this
      that.$router.go(-1)
    }
  }
}
</script>
<style lang="less" scoped>
</style>