前端进阶-个人笔记-Vue—组件实例之$props

概述

$props属性包含了组件选项props接收的父作用域中当前组件的绑定属性。

实例

实例一：$props属性和$attrs属性互为补集

$props属性和$attrs属性互为补集，二者之和为父作用域中当前组件的所有绑定属性，class和style属性除外。

<!--父组件-->
<template>
  <div>
    <my-input type="text" placeholder="请输入文字" name="demo"></my-input>
  </div>
</template>
<script>
import myInput from './myInput';
export default {
  components: {
    'my-input': myInput
  }
};
</script>

<!--子组件-->
<template>
  <div>
    <input />
  </div>
</template>
<script>
export default {
  props: ['type', 'placeholder'],
  mounted() {
    console.log(this.$props); // {placeholder: "请输入文字", type: "text"}
    console.log(this.$attrs); // {name: "demo"}
  }
}
</script>

实例二： props选项设置了父组件并没有传递的属性，$props中包含且value值为undefined

依旧采用实例一的代码，要求子组件的props选项多设置一个demo属性，而该属性父组件并没有传递过来。

<template>
  <div>
    <input />
  </div>
</template>

<script>
export default {
    props: ['type', 'placeholder', 'demo'],
    mounted() {
        console.log(this.$props) // { placeholder: '请输入文字', type: 'text', demo: undefined}
        console.log(this.$attrs) // { name: 'demo'}
    }
}
</script>

<style>

</style>

实例三：将$props中的属性传递给子组件v-bind指令可以将$props包含的属性继续传入内部组件。

<!--父组件-->
<template>
  <div>
    <my-input type="text" placeholder="请输入文字" name="demo"></my-input>
  </div>
</template>
<script>
import myInput from './myInput';
export default {
  components: {
    'my-input': myInput
  }
};
</script>

<!--子组件-->
<template>
  <div>
    <child v-bind="$props"/>
  </div>
</template>
<script>
import child from './child';
 
export default {
  components: {
    child
  },
  props: ['type', 'placeholder']
}
</script>

<!--孙子组件-->
<template>
  <div>
    <h2>孙子组件</h2>
    <input />
  </div>
</template>
<script>
export default {
  mounted() {
    console.log(this.$attrs); // {placeholder: "请输入文字", type: "text"}
  }
}
</script>