认识

2023年04月22日

柏拉文

越努力，越幸运

一、认识

---

v-bind, 缩写为 :。 用于动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。

二、修饰符

---

2.1 .prop

v-bind.prop 作为一个 DOM property 绑定而不是作为 attribute 绑定

<template>
  <div>
    <div :text-content.prop="text"></div>
  </div>
</template>

<script>

export default {
  name: "App",
  data() {
    return {
      text: "为人进出的门紧锁着"
    };
  },
};
</script>

2.2 .sync

v-bind.sync 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件两侧都没有明显的变更来源。因此, 可以用以下方法表达对其赋新值的意图:

父组件

<template>
  <div>
    <div>父组件 num 值为: {{ num }}</div>
    <HelloWorld :num.sync="num"></HelloWorld>
  </div>
</template>

<script>
import HelloWorld from "./HelloWorld.vue";

export default {
  name: "App",
  components: { HelloWorld },
  data() {
    return {
      num: 0,
    };
  },
};
</script>

子组件

<template>
  <div>
    <h3>子组件</h3>
    <button @click="add">更改父组件</button>
  </div>
</template>

<script>
export default {
  props: {
    num: Number,
  },
  methods: {
    add() {
      this.$emit("update:num", this.num + 1);
    },
  },
};
</script>

由上可知, 如果要对 porp 进行双向绑定, 我们在父组件传递数据的时候加了一个 .sync 修饰符, 子组件更新 prop 时调用了 $emit('update: prop', 数据)。其实, .sync 只是以下方式的语法糖:

父组件

<template>
  <div>
    <div>父组件 num 值为: {{ num }}</div>
     <HelloWorld :num="num" @setNum="setNum"></HelloWorld>
  </div>
</template>

<script>
import HelloWorld from "./HelloWorld.vue";

export default {
  name: "App",
  components: { HelloWorld },
  data() {
    return {
      num: 0,
    };
  },
  methods:{
    setNum(value){
      this.num = value;
    }
  }
};
</script>

子组件

<template>
  <div>
    <h3>子组件</h3>
    <button @click="add">更改父组件</button>
  </div>
</template>

<script>
export default {
  props: {
    num: Number,
  },
  methods: {
    add() {
      this.$emit("setNum", this.num + 1);
    },
  },
};
</script>

2.3 .camel