Keep Learning Vuejs 2.0 props属性

Posted 2021-05-01 前端高级开发者

props的属性是单向流。从父组件传递内容给子组件。 使用方式很简单，就式给组件自定义属性，这个属性的值，由子组件来获取

<template id="">
    <section>
         <h3>{{message}}</h3>
    </section>
</template>

<script>  
  export default {     
     name: "subcomp",     
     props: {        
        message: {default: ""}     
     }  
  }
  
</script>

父组件调用

  <div id="app">
      <subcomp message="i'm parent"></subcomp>
  </div>

props属性也可以通过绑定来传递动态数据

  <div id="app">
      <subcomp :message="parentMsg"></subcomp>
  </div>

props的属性还可以限定数据的类型

props: {
  message: {
    type:String,
    default: "", //default还可以是函数
    required： true, //必须的
    validator(val){       //自定义验证函数
    }
  },
  propb : [String, Number] //多个类型

}

限定数据类型中，主要有以下类型： String，Number，Boolean，Function，Object，Array，Symbol

不在props中定义的属性

我们也可以设定不是props得属性

<section link="http://www.youtube.com" class="sub">
     <h3>{{message}}</h3>
</section>

父组件

<div id="app">
    <subcomp message="i'm parent" link="http://www.google.com" class="hello"></subcomp>
</div>

这样子， class则会合并为hello sub, link直接被父组件的值覆盖

待续........

---

我们稍微推广一下自己:

我们正在做 "高手计划", 着重培养喜欢学习前端技术的人员, 成为WEB前端开发工程师. 我们的目标的是培养高级前端开发者. 对以后的工作没有压力, 提高自己在社会的竞争力, 解决问题的能力.

需要提升自己的欢迎入

官网: https://www.gaoshoujihua.com

欢迎大家传播与分享