10.4 Vue 父子傳值

 

簡單示例

APP.vue

<template>
  <div>
    <img :src="imgSrc">
    <!-- 父子傳值 -->


    <!-- 自定義屬性直接 經過屬性傳值 -->
    <Vheader :cityArray="citys"></Vheader>


    <!-- 自定義事件 -->
    <Vfooter   v-on:addZhuangHandler="addHandler"></Vfooter>
  </div>

</template>

<script>
  import imgSrc from './assets/bili.jpg'
  import Vheader from './components/Vheader'
  import Vfooter from './components/Vfooter'

  export default {
    name: "app",
    data() {
      return {
        imgSrc: imgSrc,
        citys:["山東","北京","深圳"]

      }
    },
    methods:{
      addHandler (str){
        // alert(str)
        this.citys.push(str);
        alert(this.citys);
      }
    },
    components: {
      Vheader,
      Vfooter
    },

  }

</script>

<style scoped>

</style>

Vfooter.vue

<template>
  <footer class="wrap">
    我是Vfooter，我想測試下給父級組件添加數據: <br>
    <button @click="addCunHandler">給父級組件的數據增長點什麼，添加一個村莊</button>
  </footer>
</template>

<script>
  export default {
    name: "Vfooter",
    data() {
      return {}
    },
    methods:{
      addCunHandler(){
      //  觸發自定義事件
        this.$emit('addZhuangHandler','破村莊');
      },
    },

  }
</script>

<style scoped>

</style>

 Vheader.vue

<template>
  <header class="wrap">

    我是header，我從父級組件那裏拿到了數據很開心：
    <ul v-for="item in cityArray">
      {{item}}
    </ul>
  </header>
</template>

<script>
  export default {
    name: "Vheader",
    data() {
      return {}
    },
    methods: {},
    props: {
      cityArray: Array
      // 若是驗證不經過會報錯
      //  [Vue warn]: Invalid prop: type check failed for prop "cityArray". Expected String with value "山東,北京,深圳", got Array
    },
  }
</script>

<style scoped>

</style>

實例詳解

app----->  header

父組件向子組件傳值 

<!-- 自定義屬性直接 經過屬性傳值 -->
<Vheader :cityArray="citys"></Vheader>

子組件從 父組件拿值 

　　　　拿值的時候必需要校驗類型，

　　　　拿值的時候的要對應父組件的自定義屬性一致才能夠拿到

props: {
      cityArray: Array
     ]

　　　　若是有錯誤是拿不到的

　　　　若是寫錯類型也會報錯。

// 若是驗證不經過會報錯
//  [Vue warn]: Invalid prop: type check failed for prop "cityArray". Expected String with value "山東,北京,深圳", got Arra

footer------->app

子組件向父組件傳值

　　在methods 中加入事件觸發傳值操做

　　利用 $emit() 方法傳值

$emit("自定義屬性的名字","要被傳入的數據")

methods:{
      addCunHandler(){
      //  觸發自定義事件
        this.$emit('addZhuangHandler','破村莊');
      },
    },

父組件獲得子組件傳遞值

　　父組件中首先要對子組件中那提供一個自定義的屬性

<!-- 自定義事件 -->
<Vfooter   v-on:addZhuangHandler="addHandler"></Vfooter>

　　對這一屬性綁定一個事件，接受的數據將會做爲參數被此事件調用

methods:{
      addHandler (str){
        this.citys.push(str);
        alert(this.citys);
      }
    },

總結

• 自定義屬性傳值
• 校驗後取值
• $emit("自定義屬性的名字","要被傳入的數據")