子组件向父组件传值的步骤(按时间先后):

  1. 在父组件模板中,在子组件标签上使用v-on自定义事件绑定父组件中的函数

    2, 在子组件对象中适当的位置使用this.$emit发射(触发)这个自定义事件, 把数据传入自定义事件中
    this.$emit(“myevent”, this.childName)
    3, 在父组件中的事件函数中,通过参数获取子组件发送的数据, 并给父组件数据更新修改
    getData(data){ this.fatherData.name = data }
  1. <body>
  2.     <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
  3.     <div id='myApp'>
  4.         父组件: {{fatherData.name}} 
  5.         <hr>
  6.         子组件: <my-com @myevent="getData">在子组件标签上使用v-on绑定自定义事件, 调用父组件中的事件函数</my-com>
  7.     </div>
  8.     <!-- 组件模板 -->
  9.     <template id='myTem'>
  10.         <div>
  11.             <input type="text" v-model="childName">
  12.             <button @click="change">修改</button>
  13.         </div>
  14.     </template>
  15.     <script>
  16.         Vue.component('myCom', {
  17.             template: '#myTem',
  18.             data(){  return{ childName: "" }  },
  19.             methods:{
  20.                 change(){
  21.                     // 把childName传给父组件,修改父组件的name
  22.                     // 在子组件发射一个自定义事件, 第一个参数是自定义事件名, 不能有大写, 第二个参数是发送的数据
  23.                     this.$emit("myevent", this.childName)
  24.                 }
  25.             }
  26.         })
  27.         new Vue({
  28.             el: '#myApp',
  29.             data: {
  30.                 fatherData: {
  31.                     name: "父组件名字"
  32.                 }
  33.             },
  34.             methods: {
  35.                 getData(data){
  36.                     // 在父组件的事件函数中接收子组件发送的数据, 并由父组件来更新父组件自己的数据
  37.                     this.fatherData.name = data
  38.                 }
  39.             }
  40.         })
  41.     </script>
  42. </body>