vue父子間傳值

搭建項目:本項目使用vue-cli腳手架工具直接搭建
項目結構:

父子組件間傳值目錄結構

1. 父傳子

在父組件調用自組件時,給子組件綁定自定義屬性,在子組件中使用props接收,子組件內部直接當成屬性使用
父組件調用子組件:

<Son title="hello world" value="test" :city="selectCity"/>

子組件接收:

props: ['title', 'value', "city"],

app.vue

<template>
<div id="app">
  <h1>hello world</h1>

  <Father/>

</div>
</template>

<script>
import Father from './components/Father'
export default {
  components: {
    Father
  }
}
</script>

<style>

</style>

father.vue

<template>
<div class="father">
  <h1>父組件</h1>
  
  <!-- 點擊相對應的button子組件中會有相對應的數據變化 -->
  <nav>
    <button v-for="(item, index) in cityList" :key="index"
      @click="selectAction(item)">
      {{item}}
    </button>
  </nav>
  
    <!-- 父組件調用子組件,如果自定義屬性是變量時,則需要 :綁定屬性  -->
  <Son title="hello world" value="test" :city="selectCity"/>

</div>
</template>

<script>
import Son from './Son'
export default {
  components: {
    Son
  },
  data(){
    return {
      cityList: ['深圳', '廣州', '上海'],
      selectCity: ''
    }
  },
  methods: {
    selectAction(city){
      console.log(city);
      this.selectCity = city;
    }
  }
}
</script>

<style scoped>
.father{
  border: 5px solid #ddd;
  padding: 50px;
}
</style>

son.vue

<template>
<div class="son">
  <h1>子組件</h1>

  <p>{{title}}</p>
  <p>{{value}}</p>

<!-- 根據父組件中傳過來的City值的變化,以下的數據而變化 -->
  <p>推薦你去玩:</p>
  <ul>
    <li v-for="(item, index) in map[city]" :key="index">
      {{item}}
    </li>
  </ul>

</div>
</template>

<script>
export default {

  // 子組件中使用props接收父組件傳過來的值, props也是組件的屬性,但是實例沒有配置項,屬于外部屬性
  props: ['title', 'value', "city"],

  // 內部屬性
  data(){
    return {
      map: {
        '上海': ['東方明珠', '外灘', '迪斯尼'],
        '深圳': ['世界之窗', '歡樂谷', '千鋒'],
        '廣州': ['長隆', '廣州塔', '千鋒']
      }
    }
  }
}
</script>

<style scoped>
.son{
  border: 5px solid #999;
  padding: 50px;
}
</style>

2.子傳父(兩種方式)

  • 在父組件調用子組件時,給子組件綁定自定義屬性, 這個自定義屬性是一個函數。
    在子組件內部使用props接收。當需要傳值給父組件時,就調用這個屬性,通過調用函數傳值給父組件。
  • 在父組件調用子組件時,給子組件綁定自定義事件,事件的實現在父組件中,是一個函數。
    當子組件需要傳值給父組件時,就使用this.$emit()觸發該事件,并傳參進去,那么父組件的函數就可以接收到參數了。
第一種方式:

父組件調用子組件:

 <Son :onSend="handleSendAction"/>

函數實現

//函數的實現,也就是傳入子組件中的函數,參數為接收子組件傳過來的值
    handleSendAction(val){
      console.log('觸發了:', val);
      this.arr.push(val);
    }
  }

子組件接收:

 props: {
   onSend: Function
 },

子組件傳值觸發事件

<!-- 通過button按鈕的click觸發事件 -->
  <button @click="btnAction">發送</button>
// 通過觸發事件,觸發父組件傳過來的函數
    btnAction(){
      console.log(this.value);
      // 調用父組件的屬性,這個屬性是一個函數,傳入參數為子組件傳過去的值
      this.onSend(this.value);
    }
 

father.vue

<template>
<div class="father">
  <h1>父組件</h1>

  <p>接收到了:</p>
  <ul>
    <li v-for="(item,index) in arr" :key="index">
      {{item}}
    </li>
  </ul>

<!-- 父組件調用子組件,綁定一個函數屬性,函數在methods中實現 -->
  <Son :onSend="handleSendAction"/>


</div>
</template>

<script>
import Son from './Son'
export default {
  components: {
    Son
  },
  data(){
    return {
      arr: []
    }
  },
  methods: {
  //函數的實現,也就是傳入子組件中的函數,參數為接收子組件傳過來的值
    handleSendAction(val){
      console.log('觸發了:', val);
      this.arr.push(val);
    }
  }
}
</script>

<style scoped>
.father{
  border: 5px solid #ddd;
  padding: 50px;
}
</style>

son.vue

<template>
<div class="son">

  <h1>子組件</h1>

  <input type="text" v-model.lazy="value"/>

<!-- 通過button按鈕的click觸發事件 -->
  <button @click="btnAction">發送</button>


</div>
</template>

<script>

export default {
//父組件接收,該值為一個函數類型
  props: {
    onSend: Function //確定該值為一個函數
  },
  data(){
    return {
      value: ''
    }
  },
  methods: {
  // 通過觸發事件,觸發父組件傳過來的函數
    btnAction(){
      console.log(this.value);
      // 調用父組件的屬性,這個屬性是一個函數,傳入參數為子組件傳過去的值
      this.onSend(this.value);
    }
  }

}
</script>

<style scoped>
.son{
  border: 5px solid #999;
  padding: 50px;
}
</style>
第二中方式:

父組件調用子組件:

 <Son @send="handleSendAction" />

函數實現:

 handleSendAction(val, ...rest){
      console.log('觸發了:', val, rest);
      this.arr.push(val);
    }

子組件觸發:

<button @click="btnAction">發送</button>
btnAction(){
      console.log(this.value);

      // 觸發組件標簽上的事件
      // 自定義事件
      // 參數1:自定義事件的名字
      // 參數2:調用事件的參數
      this.$emit('send', this.value, 1, 2, 3);
    }

father.vue

<template>
<div class="father">
  <h1>父組件</h1>

  <p>接收到了:</p>
  <ul>
    <li v-for="(item,index) in arr" :key="index">
      {{item}}
    </li>
  </ul>

  <Son @send="handleSendAction" />


</div>
</template>

<script>
import Son from './Son'
export default {
  components: {
    Son
  },
  data(){
    return {
      arr: []
    }
  },
  methods: {
    handleSendAction(val, ...rest){
      console.log('觸發了:', val, rest);
      this.arr.push(val);
    }
  }
}
</script>

<style scoped>
.father{
  border: 5px solid #ddd;
  padding: 50px;
}
</style>

son.vue

<template>
<div class="son">

  <h1>子組件</h1>

  <input type="text" v-model.lazy="value"/>

  <button @click="btnAction">發送</button>


</div>
</template>

<script>

export default {

  data(){
    return {
      value: ''
    }
  },
  methods: {
    btnAction(){
      console.log(this.value);

      // 觸發組件標簽上的事件
      // 自定義事件
      // 參數1:自定義事件的名字
      // 參數2:調用事件的參數
      this.$emit('send', this.value, 1, 2, 3);
    }
  }

}
</script>

<style scoped>
.son{
  border: 5px solid #999;
  padding: 50px;
}
</style>
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容