父组件传递值给子组件时 在其绑定的变量后加上 :变量 .sync='xxx' ， 当在子组件中需要改变这个父组件中的值的时候 使用 $emit( 'update: 变量', 值 ), 这样可以省略一步在父组件中的接受函数
常规写法：
-
父组件中
<myComponent :show='valueChild' @changeShow="accept" </myComponent> data(){ return{ valueChild: true } }, methods: { accept (data) { this.valueChild = data ; // 接收子组件传递回来的值 并改变原有值 } } -
子组件中
<template> <button @click ="closeDiv">关闭</button> </template> props: ['show'], methods: { closeDiv() { this.$emit('changeShow', false); // 发射新值到父组件 } }
sync修饰符写法：
-
父组件中
<myComponent :show.sync='valueChild' ></myComponent> data(){ return{ valueChild: true } } -
子组件中
<template> <button @click="closeDiv">关闭</button> </template> props: ['show'], methods: { closeDiv() { this.$emit('update:show', false); //触发 input 事件，并传入新值 } }
