vue父组件向子组件传参

最新推荐文章于 2025-03-21 08:35:22 发布

就像风1样

最新推荐文章于 2025-03-21 08:35:22 发布

阅读量1.9k

点赞数 2

分类专栏： Vue vue专栏

本文链接：https://blog.youkuaiyun.com/qq_42221334/article/details/91872329

版权

Vue 同时被 2 个专栏收录

99 篇文章

订阅专栏

vue专栏

78 篇文章

订阅专栏

本文介绍了如何在Vue中实现父组件向子组件传递参数，特别是通过props传递标题textTitle和控制返回键显示的逻辑ifReturn。在子组件中，接收到这些参数并用于页面渲染和条件判断。同时，还提到了在methods中通过watch监听props的变化，当textTitle的值改变时，执行相应的方法。

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

需求：头部为一个公用组件，跳转页面标题切换，同时控制返回键显示隐藏

父组件代码(引用子组件) 同时子组件上传递参数textTitle和ifReturn：

<template>
  <div>
    <headAssembly textTitle="消息" ifReturn="0"/>
  <div>
<template>
<script>
import TabSwitching from "../components/tabs/TabSwitching.vue"
export default {
  name: 'index_news',
  data () {
    return {

    }
  },
  components: {
    headAssembly
  },
}
</script>

子组件代码（接收传参显示）通过props属性接收参数textTitle直接渲染页面上，ifReturn判断显示，同时加返回上一页方法

<template>
  <div>
    <div class="headTop">
      {{textTitle}}
      <div class="head_left" v-if="ifReturn==1" @click="topRevious"> 
        <img class="Return_img" src="../../../static/img/Return1.png"/>
      </div>
    </div>
    <div class="box"></div>
  </div>
</template>

<script>
export default {
  name: "feedShopping",
  props:['textTitle','ifReturn'],
  data() {
    return { 
    };
  },
  mounted() {
    
  },
  methods: {
  
    topRevious() {
      this.$router.go(-1);
    }
  }
};
</script>

补充：

怎么在 methods 中获取子组件 props 中的参数

<template>
  <div>
    <div class="headTop">
      {{textTitle}}
      <div class="head_left" v-if="ifReturn==1" @click="topRevious"> 
        <img class="Return_img" src="../../../static/img/Return1.png"/>
      </div>
    </div>
    <div class="box"></div>
  </div>
</template>

<script>
export default {
  name: "feedShopping",
  props:['textTitle','ifReturn'],
  data() {
    return { 
        text:'',
    };
  },
    //监听
  watch: {
    textTitle: function(newVal,oldVal){
      this.ObtainId(newVal)//newVal就是监听的textTitle
    }
  },
  mounted() {
    
  },
  methods: {
    //监听获取
    ObtainId(newVal){
       this.text=newVal
    },
    topRevious() {
      this.$router.go(-1);
    }
  }
};
</script>

监听textTitle的值，当它由空转变时就会触发，这时候就能取到了，拿到值后要做的处理方法也需要在watch里面执行

更多技巧请查看vue专栏 https://blog.youkuaiyun.com/qq_42221334/column/info/27230/1