语法

2023年04月22日

柏拉文

越努力，越幸运

一、绑定 prop

---

1.1 绑定单个

通过 :prop 将父组件数据传递给子组件, prop 必须在子组件中声明才可以使用

父组件

<template>
  <div>
    <HelloWorld :name="name"></HelloWorld>
  </div>
</template>

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

export default {
  name: "App",
  components: { HelloWorld },
  data() {
    return {
      name: "世界，你好！",
    };
  },
};
</script>

子组件

<template>
  <div>
    {{ name }}
  </div>
</template>

<script>
export default {
  props: {
    name: String,
  },
};
</script>

1.2 绑定整个

通过 $props 将父组件的 props 一起传给子组件。prop 必须在每一层子组件中声明才可以使用、获取

父组件

<template>
  <div>
    <AComp :name="name"></AComp>
  </div>
</template>

<script>
import AComp from "./aComp.vue";

export default {
  name: "App",
  components: { AComp },
  data() {
    return {
      name: "世界，你好！",
    };
  },
};
</script>

子组件A

<template>
  <div>
    <BComp v-bind="$props"></BComp>
  </div>
</template>

<script>
import BComp from "./bComp.vue";

export default {
  components: { BComp },
  props:{
    name: String
  }
};
</script>

子组件B

<template>
  <div>
    {{ name }}
  </div>
</template>

<script>
export default {
  props: {
    name: String,
  },
  mounted(){
    console.log(this);
  }
};
</script>

二、绑定 class

---

2.1 对象形式

<template>
  <div>
    <div :class="{classA: isClassA,classB: isClassB}">v-bind 绑定 class</div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      isClassA: true,
      isClassB: true
    };
  },
};
</script>

2.2 数组形式

<template>
  <div>
    <div :class="[isClassA ? 'classA' : '', isClassB ? 'classB' : '']">
      v-bind 绑定 class
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      isClassA: true,
      isClassB: true,
    };
  },
};
</script>

2.3 字符串形式

<template>
  <div>
    <div
      :class="className"
    >
      v-bind 绑定 class
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      className: "xixi"
    };
  },
};
</script>

2.4 数组、对象形式

<template>
  <div>
    <div
      :class="[
        isClassA ? 'classA' : '',
        { classB: isClassB, classC: isClassC },
      ]"
    >
      v-bind 绑定 class
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      isClassA: true,
      isClassB: true,
      isClassC: true,
    };
  },
};
</script>

2.5 字符串拼接形式

<template>
  <div>
    <div :class="'div-class-name' + className">v-bind 绑定 attribute</div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      className: "1",
    };
  },
};
</script>

三、绑定 style

---

3.1 对象形式

内联形式

<template>
  <div>
    <div
      :style="{
        width: width + 'px',
        height: height + 'px',
        backgroundColor: backgroundColor,
      }"
    >
      v-bind 绑定 style
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      width: 100,
      height: 100,
      backgroundColor: "red",
    };
  },
};
</script>

data 形式

<template>
  <div>
    <div :style="style">v-bind 绑定 style</div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      style: {
        width: 100 + "px",
        height: 100 + "px",
        backgroundColor: "red",
      },
    };
  },
};
</script>

3.2 数组形式

<template>
  <div>
    <div :style="[commonStyle, style]">v-bind 绑定 style</div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      commonStyle: {
        width: 100 + "px",
        height: 100 + "px",
      },
      style: {
        backgroundColor: "red",
      },
    };
  },
};
</script>

3.3 字符串拼接形式

<template>
  <div>
    <div :style="'width:' + width + 'px' + ';' + 'height:' + height + 'px'">v-bind 绑定 attribute</div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      width: 100,
      height: 100
    };
  },
};
</script>

四、绑定 attribute

---

4.1 全部绑定

<template>
  <div>
    <div v-bind="{id: id, 'data-key': dataKey}"></div>
  </div>
</template>

<script>

export default {
  name: "App",
  data() {
    return {
      id: "divId",
      dataKey: "dataValue"
    };
  },
};
</script>

4.2 静态绑定

<template>
  <div>
    <div :id="id">v-bind 绑定 attribute</div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      id: "divId",
    };
  },
};
</script>

4.3 动态绑定 attribute

<template>
  <div>
    <div :[attr]="id">v-bind 绑定 attribute</div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      attr: "id",
      id: "divId",
    };
  },
};
</script>

4.4 静态绑定 attribute 字符串拼接

<template>
  <div>
    <div :id="'div-id-' + id">v-bind 绑定 attribute</div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      id: "1",
    };
  },
};
</script>