关于props配置项

2022-03-03 01:31:38 阅读：225 来源： 互联网

#功能：

props配置项用于为组件传递来自至外部数据。

#如何使用：

组件配置对象中：

 <h1>{{ '组件中props：'+msg }}{{' 组件中property：'+property}}</h1>

//直接定义
props: ['msg'],//数组

//简单的类型检查
props: {
    msg: String
  },
      
//多条件检查
props: {
    msg: {
        type: String,     //类型检查
        required: ture,   //是否为必填
        default: 'hello!' //默认值（如果有了required就不用写）
    }
  },

对应组件在Html标签中：

<HelloWorld msg="componentMsg"/>

效果：

# 关于大小写

HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名，如果是使用字符串模板，那么这个限制就不存在了。（Vue官网-props）

# 关于静态prop与动态prop

若是使用静态prop，则只需要在使用prop时记得加上单引号或者双引号即可

<HelloWorld msg="componentMsg"/>

若是使用动态prop，则需要使用v-bind配合，让Vue知道这个数据不是字符串，否则prop所接受的值为字符串，如：

<HelloWorld msg="123"/> <!-- 字符串类型 -->
<HelloWorld :msg="123" /> <!-- 数字类型 -->

<HelloWorld msg="false"/> <!-- 字符串类型 -->
<HelloWorld :msg="false" /> <!-- 布尔值类型 -->

# 关于修改props传进来的值

props的值时只读的，Vue会监测props是否被修改，并在prop受到修改时发出警告。

若是确实有需要修改porps所接收的值，可以将props接收的值赋值给data中的变量，然后根据需要修改data接收到的值。

props: {
    msg: String
  },
data() {
    return {
      msg_data: this.msg
    };
  },

单向数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。

（Vue官网-props）

# 关于props与data的数据谁先存在

初始化顺序是先props后data

执行顺序beforeCreate ->inject -> Props -> Methods -> Data -> Computed -> Watch ->provide-> created

（谁先执行？props还是data或是其他？ vue组件初始化的执行顺序详解）

# 关于为porp传入对象的一个情况

若有多个prop使用了同一个对象中的不同属性，这可以这样写，方便快捷

假设存在一个这样的对象：

msg: {
  id: 1,
  type: 'Massage'
}

<HelloWorld :id="msg.id" :type="msg.type"/>

<!-- 等价于-->

<HelloWorld v-bind="msg"/>

将一个对象的所有 property 都作为 prop 传入，可以使用不带参数的 v-bind (取代 v-bind:prop-name)

(Vue官网)

标签：Vue,配置,prop,msg,关于,props,组件,data
来源： https://www.cnblogs.com/66-RAKU/p/15957861.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9