vue 组件的书写

简单的来说是 vue组件最核心的就是props和自定义函数,来实现组件的开发

最简单的一个组件 子组件如下:

<template>
    <div class="bgClass">
      <h3>
        {{name}}
      </h3>
    </div>
</template>

<script>
    export default {
      name: "bg-div",
      props:{
          name:{
            type:String,
            default:‘‘
          }
      }
    }
</script>

<style lang="less" rel="stylesheet/less" scoped>
  @import "../common/css/_variate";
  .bgClass{
    margin: 0.2rem 0;
    h3{
      font-size: @mainFontSize;
      line-height: 0.48rem;
      text-align: left;
      padding-left: 0.1rem;
      background: url("../common/image/rectangle.png") no-repeat left;
      background-size: auto 100%;
    }
  }
</style>

父组件 :

原文地址:https://www.cnblogs.com/lbjmm/p/8329603.html

时间: 2024-07-31 04:36:45

vue 组件的书写的相关文章

vue 组件1

注意:vue组件中的data必须为一个函数,要不vue就会停止工作. 构成组件 组件意味着协同工作,通常父子组件会是这样的关系:组件A在它的模板中使用了组件B,他们之间必然需要相互通信:父组件需要给子组件传递数据,子组件需要将它内部的发生的事情告诉父组件.然而,在一个良好定义的接口中尽可能将父子组件解耦是很重要的.这保证了每个组件在相对隔离的环境中书写和理解,也大幅提高了组件的可维护性和可重用性. 在vue中,父子组件的关系可以总结为props down和events up;父组件通过props

vue组件讲解(is属性的用法)

什么是组件? 在说之前我们先搞清楚什么是组件?这样对我们下边的学习是很有帮助的. 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可以重复使用的代码.在较高层次上,组件就是自定义元素,Vue.js的编辑器为它添加特殊功能.在有些情况下,组件也可以是原生元素的形式,以is特性进行扩展. 怎么使用组件? 说道这里,组件是什么,我们都有了清楚的了解,但是怎么使用呢? 首先,我们要进行注册,才能进行使用 注册 之前我们也说过,可以通过new来创建一个VUE实例 n

vue组件中的样式属性:scoped,解决在父组件中无法修改子组件样式问题

Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使用PostCSS来改变以下内容实现的: <style scoped> .example { color: red; } </style> <template> <div class="example">hi</div> </

【转】Vue组件一-父组件传值给子组件

Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息,父组件监听消息 分发内容 整个博客使用的源代码-请点击 所以将用三篇博客分别进行介绍以上三种情况和使用 Vue的设计者对组件的理解 Vue的设计者,对组件和父组件之间的关系流上做了阐述,即单向数据流图:父组件向子组件传递数据,子组件回馈事件 组件意味着协同工作,通常父子组件会是这样的关系:组件 A

Vue组件化开发

一. 通过axios实现数据请求 1. json简介 json是 JavaScript Object Notation 的首字母缩写,单词的意思是javascript对象表示法,这里说的json指的是类似于javascript对象的一种数据格式. json的作用:在不同的系统平台,或不同编程语言之间传递数据. 1.1 json数据的语法 json数据对象类似于JavaScript中的对象,但是它的键对应的值里面是没有函数方法的,值可以是普通变量,不支持undefined,值还可以是数组或者jso

如何打造一套vue组件库

开篇组件库能帮我们节省开发精力,无需所有东西都从头开始去做,通过一个个小组件拼接起来,就得到了我们想要的最终页面.在日常开发中如果没有特定的一些业务需求,使用组件库进行开发无疑是更便捷高效,而且质量也相对更高的方案. 目前的开源组件库有很多,不管是react还是vue的体系里都有很多非常优秀的组件库,比如我经常使用的就有elementui和iview.当然也还有其他的一些组件库,他们的本质其实都是为了节省重复造基础组件这一轮子的过程.也有的公司可能会对自己公司的产品有特别的需求,不太愿意使用开源

来吧!一文彻底搞定Vue组件!

作者 | Jeskson 来源 | 达达前端小酒馆 Vue组件的概述 组件是什么呢,了解组件对象的分析,Vue组件中的data属性,props传递数据的原理到底是什么. 事件通信的那些事 如何了解父子组件事件通信,和遇到非父子组件事件通信如何处理. 组件类型又是什么鬼 自定义组件双向绑定v-model,动态组件,又是如何称为动态的,为啥是动态呢,递归组件,如何理解递归. Vue组件的了解 Vue的理解,可以找我上一篇vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础,组件是什么,

vue组件、路由、事件

目录 定义Vue组件 组件定义 组件化和模块化的不同 组件中展示数据和响应事件 使用components属性定义局部子组件 组件切换 使用flag标识符结合v-if和v-else切换组件 使用:is属性来切换不同的子组件,并添加切换动画 父子组件传值 父组件向子组件传值 子组件向父组件传值 使用 this.$refs 来获取元素和组件 路由 什么是路由 在 vue 中使用 vue-router 在路由规则中定义参数 使用 children 属性实现路由嵌套 命名视图实现经典布局 watch监听属

关于vue组件的一个小结

用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维护成本更加的适合,而且最近看到Apache对react的相关许可限制:这里不讨论react和vue的对比哪个好,技术框架没有最好的,只有适合项目才是最好的. 进入主题....... 组件,是vue的核心之一. 我们可以把页面各个子模块看成一个组件,可以独立拆分出来.这样不仅维护变得简单了,而且代码复