vue3 props 属性

vue3 通过 props 来定义属性，我们可以通过属性将值传给自定义组件，比如颜色、高度宽度等等，定义属性时我们也可以定义类型和默认值,本文重点描述了如何定义属性和修改属性的值。

Setup组合式定义属性

<!-- 子组件 propsSetup.vue -->
<template>
    <div class="itxst">
      <div :style="{ color:props.color }">{{msg}}</div>
      <!--绑定属性-->
      <input :style="{ color:props.color ,height:props.height+'px'}"  @input="onInput" /> 
    </div>
  </template>
  <script setup> 
  import { ref, reactive } from "vue";
  /*
   * 定义组件的属性
   * type 表示属性类型
   * default 表示默认值
   */
  const props = defineProps({
    msg: {
      type: String,
      default: "www.itxst.com",
    },
    color: {
      type: String,
      default: "#000",
    },
    height:{
      type:Number,
      default:120,
    }
  });
 
  /*
  也可以通过数组方式定义属性,缺点是不能定义类型和默认值
  const props = defineProps(['msg','color']);
  */
  </script>
  <style scoped>
</style>

使用该自定义组件

<!-- 父组件 app.vue -->
<template>
  <!-- 传入了color和height属性 -->
  <demo color="red" :height="30"/>
</template>
<script setup>
import { ref, reactive } from "vue";
// 导入组件,因为是setup语法糖，所以无需手动注册组件
// demo为当前页的组件名称你可以随便取名， "./components/propsSetup.vue" 是组件的路径
import demo from "./components/propsSetup.vue";
</script>

在线试一试

修改属性值

修改属性的值（子组件和父组件都可以修改属性的值），注意需要同时子组件定义emits和父组件使用v-model才能生效

<!-- 子组件 propsSetup.vue -->
<template>
    <div class="itxst">
      <!--子组件演示修改属性的值--> 
      <div :style="{ color:props.color ,height:props.height+'px'}" >{{msg}}</div>
      <input type="button" value="修改颜色" @click="updateColor"/>
    </div>
  </template>
  <script setup> 
  import { ref, reactive } from "vue";
  /*
   * 定义组件的属性
   * type 表示属性类型
   * default 表示默认值
   */
  const props = defineProps({
    msg: {
      type: String,
      default: "www.itxst.com",
    },
    color: {
      type: String,
      default: "#000",
    },
    height:{
      type:Number,
      default:120,
    }
  }); 
  
  //修改属性的值,定义emits可修改color属性
  const emits = defineEmits(["update:color"]);
  const updateColor=()=>{
    //把颜色改成黑色
    emits("update:color", "#000");
  }
</script>
<style scoped>
</style>

父组件中需要使用v-model和变量

<!-- 父组件 app.vue -->
<template>
  <!-- 注意  v-model和 parentColor变量 这样组件才能修改属性值，子组件修改后parentColor值也会变 -->
  <demo  v-model:color="parentColor" :height="30"/>
</template>
<script setup>
import { ref, reactive } from "vue"; 
import demo from "./components/propsSetup.vue";
//定义个变量
const parentColor=ref('red');
</script>

如果你使用的是TS，按以下方法定义事件修改属性值

//TS模式 修改属性的值,定义emits
const emits = defineEmits<{
  //定义修改color属性的事件
  (event: "update:color", color: String): void;
  //也可以定义其他事件如我随便定义了一个sent事件
  (event: "sent", id: String): void;
}>();

const updateColor = () => {
  //把颜色改成黑色
  emits("update:color", "#000");
};

在线试一试

选项式定义属性

<template>
  <!--绑定属性值-->
  <div class="itxst" :style="{ color: color, height: height + 'px' }">
    {{ msg }}
  </div>
</template>
<script>
export default {
  name: "propsdemo",
  /*
   * 定义组件的属性
   * type 表示属性类型
   * default 表示默认值
   */
  props: {
    msg: {
      type: String,
      default: "www.itxst.com",
    },
    color: {
      type: String,
      default: "#000",
    },
    height: {
      type: Number,
      default: 120,
    },
  },
  methods: {
    copy: function () {},
  },
};
</script> 
<style scoped>
.itxst {
  border: solid 1px #ddd;
  display: inline-block;
}
</style>

选项式修改属性的值

子组件代码

<template> 
  <div class="itxst" :style="{ color: color, height: height + 'px' }">
    {{ msg }}
  </div>
  <input type="button" value="修改颜色" @click="updateColor"/>
</template>
<script>
export default {
  name: "propsdemo",
  props: {
    msg: {
      type: String,
      default: "www.itxst.com",
    },
    color: {
      type: String,
      default: "#000",
    },
    height: {
      type: Number,
      default: 120,
    },
  },
  methods: {
    //修改属性的值
    updateColor: function () {
      this.$emit("update:color","#000")
    },
  },
};
</script> 
<style scoped>
.itxst {
  border: solid 1px #ddd;
  display: inline-block;
}
</style>

父组件代码

<!--  v-model和 parentColor变量 这样组件才能修改属性值，子组件修改后parentColor的值也会跟着变 -->
<demo  v-model:color="parentColor" :height="30"/>