关于组件props

最新推荐文章于 2022-12-30 18:29:07 发布

火兰

最新推荐文章于 2022-12-30 18:29:07 发布

阅读量638

点赞数

分类专栏： Vue3/Vue2框架生态链文章标签： vue

本文链接：https://blog.csdn.net/qq_47443027/article/details/114933432

版权

Vue3/Vue2框架生态链专栏收录该内容

78 篇文章 9 订阅

订阅专栏

什么是prop

早些时候，我们提到了创建一个博文组件的事情。问题是如果你不能向这个组件传递某一篇博文的标题或内容之类的我们想展示的数据的话，它是没有办法使用的。这也正是 prop 的由来。

Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property。为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中：

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。在上述模板中，你会发现我们能够在组件实例中访问这个值，就像访问 data 中的值一样。

一个 prop 被注册之后，你就可以像这样把数据作为一个自定义 attribute 传递进来：

<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>

My journey with Vue

Blogging with Vue

Why Vue is so fun

然而在一个典型的应用中，你可能在 data 里有一个博文的数组：

new Vue({
  el: '#blog-post-demo',
  data: {
    posts: [
      { id: 1, title: 'My journey with Vue' },
      { id: 2, title: 'Blogging with Vue' },
      { id: 3, title: 'Why Vue is so fun' }
    ]
  }
})

并想要为每篇博文渲染一个组件：

<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:title="post.title"
></blog-post>

如上所示，你会发现我们可以使用 v-bind 来动态传递 prop。这在你一开始不清楚要渲染的具体内容，比如从一个 API 获取博文列表的时候，是非常有用的。

基本用法
Prop的基本用法很简单，只需要在子组件的Vue实例中定义该属性并把值设为目标属性的数组即可。

Vue.component('child', {
 ...
 // 接收message
 props: ['thisData']
 ...
})

由于HTML中的属性是不区分大小写的，所以当使用DOM中的模板（HTML中）时，thisData需要转化为this_data。但是，如果使用字符串模板（JS中）时，不受限制，可以为所欲为

prop 大小写

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})
<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>

单项数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。
每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。

如果你这样做了，Vue会在控制台抛出一个警告。
一般来说，如果子组件需要操作Prop中的值，需要将Prop中的值赋值给本地定义的属性：

props: ['message'],
data () {
    return {
  		mes: this.message
	}
}
...

Prop中的静态和动态值

在正常情况下，一般在父组件中通过v-bind定义一个动态值，子组件通过Prop接收该值，所以，很多人认为，Prop只能接收动态值。但是，其实Prop可以接受静态属性。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript"  src="vue.js"></script>

</head>
<body >
<div id="app">
    <!--静态传递数据-->
     <my-component message="hi~" name="大超" age="25"></my-component>
</div>
</body>

<script>
    Vue.component('my-component',{
        //子组件使用父组件的数据 message  name  age
        props:['message','name','age'],
        //用data选项对数据进行处理
        data:function(){
          return{
              message1: this.message +'AAA'
          }
        },
        //用计算属性选项对数据进行处理
        computed:{
            message2:function(){
                return this.message + 'BBB'
            }
        },
        template:'<div>' +
                    '<span>{{message1}}</span><br>'+   //hi~AAA
                    '<span>{{message2}}</span><br>'+   //hi~BBB
                    '<span>{{message}}，{{name}}，{{age}}了</span><br>'+  hi~，大超，25了
                 '</div>'
    })
    new Vue({
        el:'#app'
    })
</script>
</html>

动态传递数据

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript"  src="vue.js"></script>
</head>
<body >
<div id="app">
        <input v-model="parentMsg"><br>
        <my-component :message="parentMsg"></my-component>
</div>
</body>

    <script>
       Vue.component('my-component',{
           props:['message'],
           data:function(){
               return{count:this.message+'模块'}
           },
           computed:{
               normalizedSize:  function () {
                   return this.message.trim().toLowerCase()
               }
           },
           template:'<div>' +
                        '<span>{{message}}---{{normalizedSize}}</span><br>'+
                        '<span>{{count}}</span>'+
                     '</div>'
       })

       new Vue({
           el:'#app',
           data:{
               parentMsg:'CCC'
           }
       })
</script>
</html>
//输出：
//CCC---ccc
//CCC模块

非Prop特性
非Props特性是指在组件上定义了属性，而又没有使用Prop接受属性。此时，子组件内不可使用该属性值，该属性会直接添加到子组件的根节点上。
比如，在一个只含有一个div的子组件上，如果我向子组件传了一个content属性，但是子组件不使用Prop接收content属性，则渲染结果为：

<div id="root">
  <div content="hello"></div>
</div>

Prop校验
Prop验证，我们可以为组件的 props 指定验证规格。如果传入的数据不符合规格，Vue 会发出警告。在前台的控制器中可以看到警告信息。
子组件用Props接收父组件传来的消息有多种形式：
1.数组形式：数组形式相当于直接接收消息，不做任何校验，一般来说，不太建议使用数组形式

props: [data1, data2]

2.简单对象形式：如果不符合会跑出类型报错

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript"  src="vue.js"></script>
</head>
<body>
    <div id="app">
        <example :prop-d="message"></example>
    </div>
</body>
<script>
    Vue.component('example', {
        props: {
            propA: {
                type: Number,
                default: 100,
            }
        },
        template:'<span>{{propA}}</span>'
    })
    new Vue({
        el:'#app',
        data:{
            message:'propA验证只能传入数字类型'
        }
    })
</script>
</html>

3.复杂对象形式

props: {
 data1: {
  type: String,
  required: true,
  default: 'default value',
  validator (value) {
   return (value.length < 5)
  }
 },
 data2: {
  type: Array,
  required: true,
  default: () => ['', '', '']
 }
}

复杂对象形式的情况下，作为对象属性的参数可以写为对象形式，参数对象含有4个属性，type、required、default、validator。
type：设定参数类型，当传入参数类型与type不相符时，控制台会报错
required：设定参数是否是必传，当设为true时，不传该参数会报错
default：设定默认值，当参数类型为复杂类型时，需使用工厂模式生成默认值，否则Vue会在控制台抛出警告。如图所示，就通过工厂模式生成了一个长度为3的空数组。
validator：校验器，是一个函数，拥有一个代表传入值的形参，可以自定义各种校验，当返回false时，会报错，表示没通过校验。

总结

prop 数据单项传递，父影响子，子不影响父
不能在组件中直接修改 prop 传递过来的值，Vue 会给出警告
prop 验证时，会在实例创建之前进行验证，所以实例的属性 (如 data、computed 等) 在 default 或 validator 函数中是不可用的
非 prop 特性，组件可以接受任意的特性，而这些特性会被添加到这个组件的根元素上。

火兰

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
关于组件props

什么是prop早些时候，我们提到了创建一个博文组件的事情。问题是如果你不能向这个组件传递某一篇博文的标题或内容之类的我们想展示的数据的话，它是没有办法使用的。这也正是 prop 的由来。Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property。为了给博文组件传递一个标题，我们可以用一个props选项将其包含在该组件可接受的 prop 列表中：Vue.component('blog..
复制链接

扫一扫