vue父组件向子组件传参

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

 

父组件代码(引用子组件) 同时子组件上传递参数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.csdn.net/qq_42221334/column/info/27230/1