.sycn 与 v-model的区别以及使用方法

最新推荐文章于 2023-05-06 22:04:32 发布

rookieITo_o

最新推荐文章于 2023-05-06 22:04:32 发布

阅读量336

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/yu_yu_lll/article/details/125189290

版权

一 .sycn的使用

vue的子组件不能直接使用父组件的数据，需要用到prop传递数据。
vue通过自定义事件系统来帮助我们修改父组件上的数据。
子组件通过$emit()方法修改父组件上面的数据。

在父组件中利用$event 接收该参数更新到 data

<template>
  <div id="app">
    {{ data }}
    <Child :data.sync="data" />
    <Child :data="data" @update:data="data = $event" />
  </div>
</template>

<script>
<template>
  <div id="app">
    {{ data }}
    <Child :data.sync="data" />
    <!-- <Child :data="data" @update:data="data = $event" /> -->
  </div>
</template>

<script>
import Child from "./components/Child.vue";
export default {
  name: "App",
  components: {
    Child,//注册子组件
  },
  data() {
    return {
      data: 2,
    };
  },
};
</script>

利用 $e m i t 触发父组件自身 u p d a t e : d a t a 方法修改 d a t a ，$ emit 在触发事件时将更新的 n 作为参数传回

<template>
  <div>
    {{ n }}
    <button @click="updateData">更新从父组件传过来n</button>
  </div>
</template>
<script>
export default {
  // 子组件要使用父组件的数据，只需要一步，在 props中接收父组件的属性
  props: ["data"], // 接收父组件给子组件定义的属性 用props
  data() {
    return {
      n: this.data,
    };
  },
  methods: {
    updateData: function () {
      this.$emit("update:data", ++this.n); //通知父组件更新值
    },
  },
};
</script>

通过这种方式可以修改父组件上的数据。
Vue 为了方便起见，将<Child :data="data" @update:data="data = $event" />提供一个缩写，即.sync修饰符<Child :data.sync="data" />。

注意：带有 .sync 修饰符的v-bind不能和表达式一起使用 (例如 :data.sync=”data++”会报错，只能传变量名称不能传表达式，v-model 也是)。

二 v-model的使用

v-model的用法和 .sync类似，区别是一个标签可以使用多个.sync，但是只能写一个v-model。

v-model的原理：

1.不使用v-model实现数据双向绑定

<div id="app">
    <!-- v-model = v-bind + v-on -->
    <!-- 输入框内容修改，message也修改，修改message，input内容也修改，双向绑定 -->
    <!-- <input type="text" v-model="message"> -->
    <!-- 实现双向绑定 @input监听输入框事件  -->
    <!-- <input type="text" :value="message" @input="valueChange" > -->
    <!-- $event获取事件对象，$event.target.value获取input值 -->
    <input type="text" :value="message" @input="valueChange($event.target.value)">
    {{message}}
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"</script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"zzz"
      },
      methods:{
        // valueChange(event){
        //   console.log("input值改变了");
        //   this.message = event.target.value
        // },
        valueChange(value){
          console.log("input值改变了");
          this.message = value
        }
      }
    })
</script>

2.使用v-model实现数据双向绑定

  <div id="app">
    <!-- 输入框内容修改，message也修改，修改message，input内容也修改，双向绑定 -->
    <input type="text" v-model="message">{{message}}
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"zzz"
      }
    })
  </script>

v-model = v-bind + v-on，实现双向绑定需要是用v-bind和v-on，使用v-bind给input的value绑定message对象，此时message对象改变，input的值也会改变。但是改变input的value并不会改变message的值，此时需要一个v-on绑定一个方法，监听事件，当input的值改变的时候，将最新的值赋值给message对象。$event获取事件对象，target获取监听的对象dom，value获取最新的值。

v-model的修饰符

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-model修饰符</title>
</head>
<body>
  <div id="app">
    <h2>v-model修饰符</h2>
    <h3>lazy,默认情况是实时更新数据，加上lazy，从输入框失去焦点，按下enter都会更新数据</h3>
    <input type="text" v-model.lazy="message">
    <div>{{message}}</div>
    <h3>修饰符number,默认是string类型，使用number赋值为number类型</h3>
    <input type="number" v-model.number="age">
    <div>{{age}}--{{typeof age}}</div>
    <h3>修饰符trim:去空格</h3>
    <input type="text" v-model.trim="name">

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"zzz",
        age:18,
        name:"ttt"
      },

    })
  </script>
</body>
</html>