父组件中设置为:
<template>
<div>
<!-- msg变量传给Child的value属性(props) -->
<Child v-model="msg"></Child>
外面{{msg}}
</div>
</template>
import Child from './Child'
export default {
data () {
return {
msg: '123'
}
},
components: {
Child
}
子组件设置为
<template>
<div>
我是个子组件: {{ value }}
<button @click="btn">点击修改value</button>
</div>
</template>
export default {
props: ['value']
methods: {
btn () {
// 外面v-model已经把@input内部实现了, 会把你传出去的值直接给v-model的变量
this.$emit('input', '子组件传出来的值')
}
}
}
注意:父组件传递过来的值,名字必须为value,如果设置的为其他名字,则接受不到数据
如果传递给子组件变量是基础类型--------v-model双向数据绑定(遵守单向数据流)
如果是引用数据类型:不要违反单向数据流,原因:如果把这个引用类型传给孩子, 有一个孩子改变, 其他的孩子都同步了(不知道谁改的...)