vue-cli3父子組件傳值

通常父子組件之間是需要相互傳數據的。

父組件向子組件傳數據

1，父組件App.vue傳遞數據menu: 'aa'給子組件的ret

<template>
  <div id="app">
    <Vcontent v-bind:ret="menu"></Vcontent>  <! -- 使用v-bind為子組件綁定數據 -->
  </div>
</template>

<script>
import Vcontent from "./components/Vcontent.vue"
export default {
  name: 'App',
  data(){
    return {
      menu: 'aa'  // 父組件的數據menu
    }
  },
  components: {
    Vcontent
  }
}
</script>

2，子組件Vcontent.vue使用ret接受父組件傳遞的menu

<template>
    <div class="content">
        <h1>{{cont}}</h1>
        <h1>{{ret}}</h1>  <! -- 展示父組件傳遞的數據 -->
    </div>
</template>

<script>
    export default{
        name: "Vcontent",
        data(){
            return {
                cont: "Vcontent"
            }
        },
        props: // 子組件接受父組件的數據，必須使用props選項聲明它預期的數據 { ret: { type: String, // 這里指父組件傳遞的數據類型，父組件也必須傳這個類型的數據 default: "ss"  // 沒接收到父組件的數據，就使用默認數據 }
 }
    }
</script>

也可以這樣接收父組件的數據

<template>
    <div class="content">
        <h1>{{cont}}</h1>
        <h1>{{rets}}</h1>  <! -- 這是使用rets接受數據 -->
    </div>
</template>

<script>
    export default{
        name: "Vcontent",
        data(){
            return {
                cont: "Vcontent",
 rets: this.ret // 在這里接收this.ret
            }
        },
 props: { ret: { type: String, default: "ss" } }
    }
</script>

子組件向父組件傳數據

子組件是通過事件向父組件傳遞數據，分如下兩種情況：

情況一：當前子組件已接收了接收父組件的數據，存在this.menu數據

父組件App.vue

<template>
  <div id="app">
    <Vcontent v-bind:menu="menus"></Vcontent>  <!-- 正向子組件傳遞menus -->
  </div>
</template>

<script>
import Vcontent from "./components/Vcontent.vue"
export default {
  name: 'App',
  data(){
    return {
      menus: ["魚香肉絲","魚香茄子"]
    }
  },
  components: {
    Vcontent
  }
}
</script>

子組件Vcontent.vue

<template>
    <div class="content">
        <ul>
            <li v-for="(item, index) in menus" v-bind:key="index">
                {{item}}
            </li>
        </ul>
        <button @click="addOneMenu">增加</button>  <! -- 子組件通過點擊事件addOneMenu向this.menu也就是父組件的menus傳遞了一個值 -->
    </div>
</template>

<script>
    export default{
        name: "Vcontent",
        data(){
            return {
                menus: this.menu // this.menu就是父組件的menus
            }
        },
 methods: { // 通過點擊事件觸發addOenMenu函數 addOneMenu(){ this.menu.push("紅燒排骨") // push一個數據 } },
        props:{
            menu:
            {
                type: Array
            }
        }
    }
</script>

情況二：父組件沒有向當前子組件傳遞數據，也就是拿不到this.menu數據，或則是不想通過this.menu傳遞數據

子組件Vcontent.vue，為了直觀查看數據還使用Vcontent.vue

<template>
    <div class="content">
        <ul>
            <li v-for="(item, index) in menus" v-bind:key="index">
                {{item}}
            </li>
        </ul>
        <button @click="addOneMenu">增加</button>
    </div>
</template>

<script>
    export default{
        name: "Vcontent",
        data(){
            return {
                cont: "Vcontent",
                menus: this.menu
            }
        },
        methods: {
            addOneMenu(){
                //this.menu.push("紅燒排骨")  // 我們不使用這種方法
                this.$emit("addMenu","紅燒魚")  // this.$emit是為了觸發父組件的addMenu事件，"紅燒魚"是子組件傳遞的數據
            }
        },
        props:{
            menu:
            {
                type: Array
            }
        }
    }
</script>

父組件App.vue

<template>
  <div id="app">  <! -- 不要注意v-bind,為了直觀看menus數據的變化 -->
    <Vcontent v-bind:menu="menus" @addMenu="addHandler"></Vcontent>
  </div>
</template>

<script>
import Vcontent from "./components/Vcontent.vue"
export default {
  name: 'App',
  data(){
    return {
      menus: ["魚香肉絲","魚香茄子"]
    }
  },
 methods: { addHandler(val){ // 觸發addHandler函數，val用來接收子組件傳遞的數據 this.menus.push(val) // push數據 } },
  components: {
    Vheader,
    Vcontent
  }
}
</script>

結束！