vue2.0 子组件改变props值,并向父组件传值的方法

在Vue2.0中，子组件改变props值并传递给父组件有两种方式：

第一种方式是使用自定义事件，子组件需要使用$emit方法来触发自定义事件，父组件则需要在模板上绑定子组件触发的事件并传入参数。具体步骤如下：

1.在子组件内部使用$emit方法触发自定义事件，并传入参数

//子组件内部
this.$emit('customEvent',data);

2.在父组件的模板中绑定子组件触发的事件并传入参数

//父组件内部
<template>
  <div>
    <child-component @customEvent="handleCustomEvent"></child-component>
  </div>
</template>

<script>
  import ChildComponent from './childComponent.vue'
  export default {
    components:{
      ChildComponent
    },
    methods:{
      handleCustomEvent(data){
        console.log(data);//打印改变props的值
      }
    }
  }
</script>

在父组件内部监听子组件的自定义事件，并将子组件触发事件时传递的数据作为参数传入回调函数中处理。

第二种方式是使用.sync修饰符，可以用在子组件中的props属性上，使其自动具有双向绑定的功能。子组件只需要使用this.$emit方法触发一个事件，父组件就会自动更新该变量的值。具体步骤如下：

1.在子组件的props属性中添加.sync修饰符

//子组件中的props
props:{
   myData:{
      type:Object,
      default(){
        return {}
      },
      //添加.sync修饰符，实现双向绑定
      sync: true,
   }
}

2. 在子组件中使用this.$emit方法触发一个事件，并传递改变的数据

//子组件内部
this.$emit('update:myData',{
      name:'vue',
      age:2
})

3.在父组件中使用子组件时在v-bind中指定子组件的props的属性值即可

//父组件内部
<template>
  <div>
    <child-component :my-data.sync="myData"></child-component>
  </div>
</template>

<script>
  import ChildComponent from './childComponent.vue'
  export default {
    components:{
      ChildComponent
    },
    data(){
      return{
        myData:{}
      }
    }
 }
</script>

在父组件中使用子组件时，绑定子组件的props的属性值使用.sync修饰符即可实现双向绑定，当子组件内部改变该属性值时，父组件的值也会随之改变。