利用组件的自定义事件反向修改父组件的值------$emit
1.父组件App中给子组件tbox进行属性绑定 和自定义事件绑定
<tbox :属性值="参数" @自定义事件名称="函数名称">tbox>
2.子组件中利用props接收属性
props:["父组件传递的参数名称"],
3.子组件中利用this.$emit出发事件并向父组件传值
this.$emit("事件名称","传值")
注意这里的事件名称要和在父组件绑定的事件名称一致
4.父组件中调用自定义事件绑定的函数，并接受子组件传参
自定义函数名称(e){
this.msg=e
}
举例：
父文件
<template>
<div class="mainbox">
<div>father的数据-----{{msg}}div>
<tbox :msg="msg" @change="change">tbox>
div>
template>
<script>
import tbox from "./components/tbos.vue"
export default {
data(){
return{
msg:"hello"
}
},
components:{
tbox,
},
methods:{
change(e){
this.msg=e
}
}
}
script>
子文件
<template>
<div>
<div>child的数据---{{msg}}div>
<button @click="change">changebutton>
div>
template>
<script>
// import axios from "axios"
export default {
props:["msg"],
data() {
return {
}
},
methods: {
change(e){
this.msg="666666"
this.$emit("change","子组件修改了值")
}
},
mounted(){
}
}
script>
利用.sync进行反向传值
App.vue文件
<template>
<div class="mainbox">
<div>father的数据-----{{msg}}div>
<tbox :msg="msg" @change="change">tbox>
<div>father的数据-----{{msg2}}div>
<tbox2 :msg2.sync="msg2">tbox2>
div>
template>
<script>
import tbox from "./components/tbos.vue"
import tbox2 from "./components/tbos2.vue"
export default {
data(){
return{
msg:"hello",
msg2:"heel2"
}
},
components:{
tbox,
tbox2
},
methods:{
change(e){
this.msg=e
},
change2(e){
this.msg2=e
}
}
}
script>
<style lang="scss">
.mainbox{
width: 300px;
height: 300px;
border: 1px solid black;
margin: 0 auto;
}
style>
tboxs.vue文件
<template>
<div>
<div>child2的数据---{{msg2}}div>
<button @click="change2">change2button>
div>
template>
<script>
// import axios from "axios"
export default {
props:["msg2"],
data() {
return {
}
},
methods: {
change2(e){
// this.msg="666666"
this.$emit("update:msg2","子组件2修改了值")
}
},
mounted(){
}
}
script>
利用v-model进行反向传值
App.vue文件
<template>
<div class="mainbox">
<div>father的数据-----{{msg}}div>
<tbox :msg="msg" @change="change">tbox>
<div>father的数据-----{{msg2}}div>
<tbox2 :msg2.sync="msg2">tbox2>
<div>father的数据-----{{msg3}}div>
<tbox3 v-model="msg3">tbox3>
div>
template>
<script>
import tbox from "./components/tbos.vue"
import tbox2 from "./components/tbos2.vue"
import tbox3 from "./components/tbos3.vue"
export default {
data(){
return{
msg:"hello",
msg2:"heel2",
msg3:"hello3"
}
},
components:{
tbox,
tbox2,
tbox3
},
methods:{
change(e){
this.msg=e
},
change2(e){
this.msg2=e
},
change3(e){
this.msg3=e
}
}
}
script>
<style lang="scss">
.mainbox{
width: 300px;
height: 300px;
border: 1px solid black;
margin: 0 auto;
}
style>
tbos3.vue文件
<template>
<div>
<div>child3的数据---{{value}}div>
<button @click="change3">change3button>
div>
template>
<script>
// import axios from "axios"
export default {
props:["value"],=====>重点
data() {
return {
}
},
methods: {
change3(e){
// this.msg="666666"
this.$emit("input","子组件3修改了值")//重点
}
},
mounted(){
}
}
script>
注意：父组件传值一定要用v-model ，子组件接受值用value 利用$emit绑定事件时使用input为参数