Vue中sync和v-model和Vue-router的一些进阶操作

coder_glack

已于 2022-02-23 10:47:48 修改

阅读量335

点赞数

文章标签： vue.js 前端 javascript

于 2022-02-16 17:12:44 首次发布

本文链接：https://blog.csdn.net/qq_43013884/article/details/122945672

版权

本文探讨了Vue中`sync`修饰符的使用，特别是在子组件存在多个双向绑定数据的情况。同时讲解了如何在value值自定义时使用`model`。还涉及到了自定义消息弹出框的实现，以及Vue的全局守卫如`router.beforeEach`进行权限检查和组件守卫`beforeRouteEnter`。此外，文章还讨论了动态路由和路由匹配的概念。

摘要由CSDN通过智能技术生成

sync的用法

一个子组件，存在多个需要双向绑定的数据

原来的思路是通过v-model 子组件触发 $emit(‘input’, e.xx.xx) 会自动完成双向绑定，现在如果需要多个参数就可以使用sync。

// 父组件
<ZChildInput :username.sync="model.username" v-model="age"></ZChildInput>
// 子组件
username: <input type="text" :value="username" @input="usernameChange">
age: <input type="text" :value="value" @input="ageChange">

<script>
export default {
   
  props: ['username', 'value'],
  methods: {
   
    usernameChange(e