当先锋百科网

首页 1 2 3 4 5 6 7

Vue props用法详解

父子组件

比如我们需要创建两个组件 Test(父组件) 和 Cmpone(子组件)，现在我们要实现从Test组件向Cmpone组件传递数据。父组件向子组件传递数据分为两种方式：动态和静态

静态props

子组件要显示的用 props 声明它期望获得的数据

  • Test组件
<template>
   <div class="Test">
       <cmpone forChildMsg="字符串随便写"></cmpone>
   </div>
</template>
<script>
import Cmpone from './Cmpone'
export default {
    name: 'Test',
    components:{
        Cmpone,
    }
}
</script>
<style scoped>
</style>

  • Cmpone组件
<template>
    <div class="cmpone">

        <div>{{forChildMsg}}</div>
    </div>

</template>
<script>

    export default {
        name: 'Cmpone',
        components:{

        },
        props: ["forChildMsg"]

    }
</script>
<style scoped>

</style>

  • 动态props

在模板中，要动态地绑定父组件的数据到子组件模板的 props，和绑定 Html 标签特性一样，使用v-bind绑定；
基于上述静态 props 的代码，这次只需要改动父组件

Test组件

<template>
   <div class="Test">
       <cmpone :forChildMsg="forChildMsg"></cmpone>
   </div>
</template>
<script>
import Cmpone from './Cmpone'
export default {
    name: 'Test',
    components:{
        Cmpone,
    },
    data(){
    	return{
    	forChildMsg:'父组件向子组件传递数据'
    	}
    }
}
</script>
<style scoped>
</style>

Cmpone组件

<template>
    <div class="cmpone">

        <div>{{forChildMsg}}</div>
    </div>

</template>
<script>

    export default {
        name: 'Cmpone',
        components:{

        },
        props: ["forChildMsg"]

    }

props验证

我们可以为组件的 prop 指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。

为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组
 

  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }

props驼峰标识

HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名

重申一次，如果你使用字符串模板，那么这个限制就不存在了。

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'

<blog-post :post-title="message"></blog-post>