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>
结束!