Vue---反向传值

利用组件的自定义事件反向修改父组件的值------$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">change</button>

    </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">change2</button>

    </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">change3</button>

    </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为参数