props 小技巧

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

比如下面的例子，input输入框。我们有很多的原生属性，比如：name、placeholder、disabled等等。我们如果都定义在props显示接收，未免太过繁琐。所以官网出现了：v-bind="$props" 这样的操作。v-bind

子组件： ps：props: [name,placeholder,disabled] 需要加引号

<template>
  <div class="">
    child：<input v-bind="$props" />
  </div>
</template>

<script>
export default {
  
  props: ['name','placeholder','disabled'],
  name: "",
  created() {},
  mounted() {},
  data() {
    return {};
  },
  computed: {},
  methods: {}
};
</script>

<style  scoped></style>

不用这么繁琐加这么多属性了 <input :name="name" :placeholder="placeholder" :disabled="disabled" />

父组件使用：

<propsChild name="name" placeholder="placeholder" disabled="disabled"></propsChild>