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