vue.js----子组件向父组件传值的方式

1，子组件向父组件传值方式一：使用 this.$emit('methodName', '要传递的数据') 触发子组件上绑定的methodName 属性对应的值，该值就是父组件中的某一个方法名，会自动再执行该方法，在该方法中也可以拿到传递的数值了；

子组件代码；

<template>
<div class="all">
    我是子组件：  <input type="text" v-model="child_txt">  <button @click="send">点我向父组件传递数据</button> 
</div>
</template>
<script>
export default {
  data() {
    return { child_txt:''};
  },
  methods:{
      send(){
          this.$emit('action',this.child_txt)
      }
  }  
};
</script>
<style lang='scss' scoped>
.all{  border:1px solid blue;  height:200px;   width:100%;  }   
</style>

这是父组件代码：

<template>
  <div class="about">
    我是父组件：
    <h1>This is an about page</h1>
      <child v-bind:title="obj" @action="from"></child>
      <!-- <child   :data_arr="data_arr"></child> -->
      我是从子组件传递过来的：{{from_txt}}
  </div>
</template>
<script> 
import child from '../components/child.vue'
 
export default {
  data(){
    return{   }
  },
  components:{
    'child':child
  },
  methods:{
    from(val){
      this.from_txt = val
    }
  }
}

子组件向父组件传值的过程：  在子组件中点击按钮“点我向父组件传递数据”，会执行send方法，该方法中 可以使用 $emit 触发父组件的自定义事件 action, (action事件绑定在了child标签上)，触发该事件后，会执行对应的from方法，在from方法中会得到从子组件传递过来的值；再对该值进行操作就ok了；

2，子组件改变父组件中的值：通过$parent

子组件代码:

<template>
  <div class="all2">
    <input type="text" v-model="name" />
    <button @click="send">点我改变父组件中的值</button>
  </div>
</template>
<script>
export default {
  data() {
    return {name:''};
  },
  methods:{
      send(){
          this.$parent.change =  this.name  // 改变父组件中data中的变量值
            this.$parent.func() // 执行父组件中的方法
      }
  }
};
</script>

父组件代码:::

<template>
  <div class="about">
    我是父组件： 
      <child2></child2>
      子组件传递过来的值：  {{change}}
  </div>
</template>
<script>  
import child2 from '../components/child2.vue'
// 全局注册组件
export default {
  data(){
    return{  change:'' } 
},
methods:{ 
     func(){
       alert("9090909090")
     }
}
}
</script>