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>

结束！