使用v-model 传参组件
站长
· 阅读数 23
props
在vue中，我们都知道父子组件的传参父->子 是用props，子->父是在父组价写个自定义事件，然后通过子组件使用$emit('methodsName',value)进行传参。虽说过程不算复杂，但是流程也略显繁琐。
v-model
我们v-model的使用场景一般都是在input框绑value值，或者element-ui上绑定一个属性值，了解v-model的小伙伴肯定知道，v-model可以拆封为一个v-bind以及@change事件，如果把input看成一个子组件，input的输入相当于父组件的传值，input的输出看成子组件的回调，那就满足了我们流程去繁就简的目的，说干就干...
父组件
子组件
页面显示
小伙伴如果这样做一定会发现报错了 子组件的message访问不到，那是为啥呢，我们打开一下开发者插件
在子组件中发现了我们在父组件中传递过来的message值，那我们就可以使用这个进行到接收父组件的值了
那子组件写成这样就可以出来值了
我们继续说
我们可以使用props一样，记录v-model传的值以及自定义方法
我们在页面显示的时候子组件写成了$attrs.value此处的value就是默认值，那我们可以改变此处默认值，改成你想改的名称，上面图片我就改为了myValue，改完之后再看开发者插件
就已经很清楚的改成了我们想要的名称了，那仔细的小伙伴发现还有个event属性，没错，他就是给我们子传父的，同理，也是可以在此处改成其他的名称。比如我们测试一下传参
这里测试下，改变上述的值
结果，amazing... 改变成功！
观察下父组件开发者工具传的值也变了
各位小伙伴有没有觉得无用的知识增加了 还是有用的知识变多了呢