精选文章 核心vue组件概念

核心vue组件概念

作者:酷的没边 时间: 2020-07-25 04:45:20
酷的没边 2020-07-25 04:45:20

props:

props定义了这个组件有哪些可配置的属性,组件的核心功能也都是它来确定的。写通用组件时,props 最好用对象的写法,这样可以针对每个属性设置类型、默认值或自定义校验属性的值,这点在组件开发中很重要,然而很多人却忽视,直接使用 props 的数组用法,这样的组件往往是不严谨的

           :type='type'
           :is-visible="false"
           :on-change="handlePropChange"
           :list=[22,33,44]
           title="属性Demo"
           class="test1"
           :class="['test2']"
           :style="{ marginTop: '20px' }"

//注意:style 的优先级是要高于 style

style="margin-top: 10px">
 
 

props: {
    name: String,
    type: {
   //从父级传入的 type,它的值必须是指定的 'success', 'warning', 'danger'中的一个,如果传入这三个以外的值,都会抛出一条警告
      validator: (value) => {
        return ['success', 'warning', 'danger'].includes(value)
      }
    },
    onChange: {
    //对于接收的数据,可以是各种数据类型,同样也可以传递一个函数
      type: Function,
      default: () => { }
    },
    isVisible: {
      type: Boolean,
      default: false
    },
    list: {
      type: Array,
      // 对象或数组默认值必须从一个工厂函数获取
      default: () => []
    }
  }

从上面的例中,可以得出props 可以显示定义一个或一个以上的数据,对于接收的数据,可以是各种数据类型,同样也可以传递一个函数。通过一般属性实现父向子通信;通过函数属性实现子向父通信

 data与props区别:

  • 相同点

两者选项里都可以存放各种类型的数据,当行为操作改变时,所有行为操作所用到和模板所渲染的数据同时都会发生同步变化

  • 不同点

data 被称之为动态数据,在各自实例中,在任何情况下,我们都可以随意改变它的数据类型和数据结构,不会被任何环境所影响

单向数据流:

这个概念出现在组件通信。props的数据都是通过父组件或者更高层级的组件数据或者字面量的方式进行传递的,不允许直接操作改变各自实例中的props数据,而是需要通过别的手段,改变传递源中的数据。那如果有时候我们想修改传递过来的prop,有哪些办法呢?

过渡到 data 选项中:在子组件的 data 中拷贝一份 prop,data 是可以修改的

export default {

        props: {

             type: String

},

data () {

return { currentType: this.type }

       }

}

在 data 选项里通过 currentType接收 props中type数据,相当于对 currentType= type进行一个赋值操作,不仅拿到了 currentType的数据,而且也可以改变 currentType数据

利用计算属性:

export default {
  props: {
    type: String
  },
  computed: {
    normalizedType: function () {
      return this.type.toUpperCase();
    }
  }
}

以上两种方法虽可以在子组件间接修改props的值,但如果子组件想修改数据并且同步更新到父组件,却无济于事。在一些情况下,我们可能会需要对一个 prop 进行【双向绑定】,此时就推荐以下这两种方法:

使用.sync:


   

     

父组件msg:{{ msg }}


     

父组件数组:{{ arr }}


   

   
   

   
 


 


   
子组件msg:{{ msg }}

   
子组件数组:{{ arr }}

   
   
     
 


 


   

  •      
         

    // 将checked的值传递给父组件
       


  •  



    v-bind:style 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用引号括起来) 来命名

    v-slot新语法:


       

    2.6 新语法


       
         

    默认插槽:default slot


         
         
       

     



     


       
       
       
     



     

     

    勿删,copyright占位
    分享文章到微博
    分享文章到朋友圈

    上一篇:UML 用例图

    下一篇:Python基础语法——列表的基本操作

    您可能感兴趣

    • 算法核心知识总结

      (1) 数组和链表的区别:数组支持顺序访问,就是可以随机的访问任意元素而不必从头开始遍历,因此适合 查找,但不擅长插入与删除,因为还要移动后面的元素 而链表基于本身的特点是,末尾指针始终指向下一个元素,因此适合插入删除操作,但不适用与随机访问, 因为要重头开始遍历 (2) 算法复杂度 如果对小规模数据进行排序,可以选择时间复杂度是O(n2)的算法;如果对大规模数据进行排序,时间复杂度是O(n...

    • RabbitMQ(一):RabbitMQ简介

      RabbitMQ是目前非常热门的一款消息中间件,不管是互联网大厂还是中小企业都在大量使用。作为一名合格的开发者,有必要对RabbitMQ有所了解,本文是RabbitMQ快速入门文章,主要内容包括RabbitMQ是什么、RabbitMQ核心概念、常用交换器类型等。 RabbitMQ简介 消息队列提供一个异步通信机制,消息的发送者不必一直等待到消息被成功处理才返回,而是立即返回。消息中间件负责处...

    • 数据仓库介绍与实时数仓案例

      1.数据仓库简介 数据仓库是一个面向主题的(Subject Oriented)、集成的(Integrate)、相对稳定的(Non-Volatile)、反映历史变化(Time Variant)的数据集合,用于支持管理决策。 数据仓库是伴随着企业信息化发展起来的,在企业信息化的过程中,随着信息化工具的升级和新工具的应用,数据量变的越来越大,数据格式越来越多,决策要求越来越苛刻,数据仓库技术也在不...

    • 2020前端面试专题整理

      全是从网上整理的(狗头保命) vue3.0 与vue2.0的区别:https://juejin.im/post/6844904128628391944 目录结构发生变化: 移除了配置文件目录(config与build文件夹),但是多了env.production与env.development,除了文件位置,实际配置和2.0没有什么不同,没有config文件,跨域配置转移到vue.confi...

    • 全数字化业务敏捷能力是数字经济环境下决定企业生死的关键能力

      一、全数字化业务敏捷能力是新数字时代的要求 数字经济时代,任何企业都逃脱不了全数字化的旋涡。数字化时代的特征就是信息技术变革、商业模式创新和生态产业融合的步伐越来越快。新的竞争对手具有天然的创新能力、快速反应能力等竞争优势,这将大大削弱处于市场领导企业的影响力或彻底革了他们的命。那么,这些巨型企业该如何应对呢? 1、数字化时代的商业模式 企业要想利于不败之地就要建立适应时代的商业模式,为客户...

    • 计算机必备专用英语词汇

      非常好的单词整理,转载一下当作笔记 1.单词说明:   command n. 命令,指令 [kə'mɑ:nd]   单词拼写 名词 单词含义 音标(发音)   提示:着重记忆单词对应的意思,有能力最好词性也记忆。 2.词性说明: n v vi vt conj prep pron adj adv 名词 动词 非及物动词 及物动词 连词 介词 代词 形容词 副词 3.单词列表: 1.file,n...

    • 【时间序列】时间序列基本概念总结

      最近一直在接触时间序列,所以打算写一些有关时间序列的文章,预测部分会从规则开始、到传统模型、到机器学习、再到深度学习,此外也会介绍一些时间序列的基本概念,包括自相关、平稳性、滞后性、季节性等。 1.基本概念 1.1 时间序列预测 预测是商业中的常见统计任务,它可以为生产、运输和人员安排等决策提供信息,并为长期战略规划提供指导。预测是指在考虑到所有可用信息的前提下,包括历史数据和可以影响预测的...

    • 中国耳机能否把AirPods拉下铁王座,全看一颗“芯”

      作者|茜茜 编辑|猛哥 1853年,犹太青年李维斯和当时的许多美国人一样,满怀梦想地踏上了西部淘金之旅。 很遗憾,他去晚了,到处都是人,还被抢地盘的恶棍们给揍了一顿。 李维斯很快从欺辱中恢复过来,他发现淘金人的衣服很容易磨破,而西部到处都是废弃的帐篷,如果把这些帐篷缝制成裤子,肯定抗穿耐磨。就这样,他缝制了世界上第一条牛仔裤。从此开创了他的牛仔裤王国。 世上的事情就是这么不可思议。 150年...

    华为云40多款云服务产品0元试用活动

    免费套餐,马上领取!
    CSDN

    CSDN

    中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。