1 父组件向子组件传值 我们可以利用defineprops自定义属性实现该功能
首先我们在子组件中定义userinfo变量然后通过:users='userinfo'的方式传过去
在子组件中 我们通过defineprops来接收其的值 并且通过watch监听属性来监测他变化的值并且赋值给子组件中的user变量 从而在子组件中的template模板中渲染出来
然后再页面中的效果如图
当然我们也可以用vue devtools调试工具查看
2子组件向父组件传值 我们可以通过defineemits来实现
我们就实现了点击子组件的button按钮来向父组件传输子组件的userinfo
然后我们在父组件中 绑定我们刚刚在子组件中自定义的方法test然后回调函数为handleChange
我们点击子组件的button之后
父组件成功的打印了子组件中userinfo的值
3假如我们想通过子组件直接修改父组件的值 通过defineemits方式有些许繁琐 所以我们可以 利用sync语法糖 在子组件内 通过点击按钮事件来改变父组件中display的值
在父组件中 通过:visalbe.sync='display'的形式改变其值
其实他本质上就是简化子传父的语法糖 当子组件更新visible的值时会显式的触发更新事件 从而改变父组件中display的值
