写一个vue组件

我下面写的是以.vue结尾的单文件组件的写法,是基于webpack构建的项目。如果还不知道怎么用webpack构建一个vue的工程的,可以移步到vue-cli

一个完整的vue组件会包括一下三个部分:

  1. template:模板
  2. js: 逻辑
  3. css : 样式

每个组件都有属于自己的模板,js和样式。如果将一个页面比喻成一间房子的话,组件就是房子里的客厅、卧室、厨房、厕所。如果把厨房单独拿出来的话,组件又可以是刀、油烟机...等等。就是说页面是由组件构成的,而组件也可以是组件构成的。这样就可以非常的灵活,耦合性也非常的低。

首先来看看一个组件在不是在.vue文件内的写法:

Vue.component('simple-counter', {
template: '<div id="inputBox"><input type="text"></div>',
data () { // 数据
return {
counter: 0
}
},
methods: {
// 写点方法
},
created () {
// 生命钩子
},
computed: {
// 计算属性
}
})

template是用来干嘛的呢?

<template>
<div id="inputBox">
<input type="text">
</div>
</template>
<!--
template就是这个组件的html,也就是下面部分(vue-loader会将template标签下的内容解析出来):
-->
<div id="inputBox">
<input type="text">
</div>
<!--
对应原生写法的话,就是template内的dom字符串
-->

js部分

export default {
data () {
return {
counter: 0
}
},
methods: {
// 方法
},
created () {
// 生命钩子
},
computed: {
// 计算属性
}
}
// 在这里很明显js部分就是对应的原生写法内的非template部分了。
// export default这个是es6的模块写法,不懂的可以先去了解es6的模块化

css部分

<style lang="scss" scoped>
...样式
</style>
<!--这里的你可以使用scss(CSS扩展语言)只要安装"sass-loader"和"node-sass"这两个npm包就好了,vue-cli已经配好相关参数了。如果想使用less或其它css扩展语音,只要装好各自的编译包就好了。而scoped是让css的作用域只在该文件下。-->

引入

要怎么在其它组件引用该组件?

组件一(button.vue)
<template>
<div class="button">
<button @click="onClick">{{text}}</button>
</div>
</template>
<script>
export default {
props: ['text'], // 获取父组件的传值
data () {
return { }
},
methods: {
onClick () {
console.log('点击了子组件')
// 通过触发自定义事件修改父组件传递的text
this.$emit('event1', '我修改了text')
}
}
}
</script>
<style lang="scss" scoped>
.button {
button {
width: 100px;
}
}
</style>
组件二(box.vue)
<template>
<div class="box">
<v-button :text="text" ref="button" @event1="changeText"></v-button> <!--使用组件并传值(text)-->
</div>
</template>
<script>
import Button from './button.vue' // 引入子组件
export default {
components: {
'v-button': Button
},
data () {
return {
text: '按键的name'
}
},
methods: {
changeText (value) { // 自定义事件修改text的值
this.text = value
}
}
}
</script>

这里box.vue里引入了button.vue的组件,并通过components注册,在box.vue使用时只要使用注册时候的名称即可。

父组件向子组件传递数据

可以通过prop向子组件传值。

子组件和父组件的交互其实还有很多,例如子组件要怎么修改父组件传递的值?

因为vue的数据是单向的,所以子组件是不允许修改父组件的值的,官方是通过事件的形式修改的,就是父组件在子组件绑定一个自定义事件v-on:event1="event1",

然后子组件通过this.$emit('event1')触发修改。可以理解为修改父组件传递的值一定要发生在父组件所在的作用域内。

父组件怎么获取子组件的实例

这里父组件可以在子组件定义ref,在通过this.$refs.xxx获取对应的子组件实例。

而子组件可通过this.$parent获取父组件的实例。

写一个vue组件的更多相关文章

  1. 如何写好一个vue组件,老夫的一年经验全在这了【转】 v-bind=&quot;$attrs&quot; 和 v-on=&quot;$listeners&quot;

    如何写好一个vue组件,老夫的一年经验全在这了 一个适用性良好的组件,一种是可配置项很多,另一种就是容易覆写,从而扩展功能 Vue 组件的 API 来自三部分——prop.事件和插槽: prop 允许 ...

  2. Vue3语法快速入门以及写一个倒计时组件

    Vue3写一个倒计时组件 vue3 beta版本发布已有一段时间了,文档也大概看了一下,不过对于学一门技术,最好的方法还是实战,于是找了一个比较简单的组件用vue3来实现,参考的是vant的count ...

  3. Laravel 项目中编写第一个 Vue 组件

    和 CSS 框架一样,Laravel 不强制你使用什么 JavaScript 客户端框架,但是开箱对 Vue.js 提供了良好的支持,如果你更熟悉 React 的话,也可以将默认的脚手架代码替换成 R ...

  4. js单行写一个评级组件

    单行写一个评级组件:"★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate); -----------------------------------分隔符- ...

  5. 自己编写并发布一个Vue组件

    自己编写并发布一个Vue组件 1. 几种开源协议的介绍 https://blog.csdn.net/techbirds_bao/article/details/8785413 2.开始编写组件 新建p ...

  6. 一个 VUE 组件:实现子元素 scroll 父元素容器不跟随滚动(兼容PC、移动端)

    介绍 我们经常遇到一种情况.当滑动滚动条区域时,子元素滚动条到底部或顶部时就会触发父级滚动条,父级滚动条同理会继续向上触发,直至body容器.这是浏览器默认的滚动行为. 但是很多情况,我们想要子元素滚 ...

  7. 表单配置项写法,表单写成JSON数组套对象,一行是一个数组单位,一列是一个对象单位,然后再写一个公共组件读取这个配置,循环加载slot,外层载入slot的自定义部分,比如input select等,这种写法就是把组件嵌套改为配置方式

    表单配置项写法,表单写成JSON数组套对象,一行是一个数组单位,一列是一个对象单位,然后再写一个公共组件读取这个配置,循环加载slot,外层载入slot的自定义部分,比如input select等,这 ...

  8. 写一个Vue loading 插件

    什么是vue插件? 从功能上说,插件是为Vue添加全局功能的一种机制,比如给Vue添加一个全局组件,全局指令等: 从代码结构上说,插件就是一个必须拥有install方法的对象,这个方法的接收的第一个参 ...

  9. 如何优雅的写一个Vue 的弹框

    写Vue或者是react 都会遇见弹框的问题.也尝试了多种办法来写弹框,一直都不太满意,今天特地看了一下 Element UI 的源码,模仿着写了一个简易版. 大概有一下几个问题: 1.弹框的层级问题 ...

随机推荐

  1. POJ 1917

    http://poj.org/problem?id=1917 poj的字符串的一道水题. 题意么无关紧要, 反正输出的第一行就是把那个<>去掉,s1<s2>s3<s4&g ...

  2. 如何用ajax提交多组同样的数据(数组)到后台?

    我在AJAX中这样写 $("#subbutton").click(function(){          var machineCode_1=$("#machineCo ...

  3. Java语法基础(三)----选择结构的if语句、switch语句

    [前言] 流程控制语句: 在一个程序执行的过程中,各条语句的执行顺序对程序的结果是有直接影响的.也就是说程序的流程对运行结果有直接的影响.所以,我们必须清楚每条语句的执行流程.而且,很多时候我们要通过 ...

  4. Intel Edison 参考链接2

    Edison的breakout板子的引脚: http://iotdk.intel.com/docs/master/mraa/java/edison.html Edison的引脚 http://www. ...

  5. 关于解压覆盖IIS文件后,新的文件不具备权限导致DMS系统无法正常运行

     向DMS的服务器端站点bin目录覆盖任何补丁文件,请注意:Web站点的bin目录中的文件,IIS的服务进程(Windows2003以上,都是对应Network Services账户)必须对这些文件具 ...

  6. docker~在centos容器中安装新程序

    上一篇我们使用了阿里加速器安装了centos镜像,然后创建了一个新容器,运行了这个镜像,这一讲我们来为这个镜像添加一些应用程序,然后再保存容器,push容器到仓储,大家就可以直接pull我生产的容器了 ...

  7. MongoDB的真正性能-实战百万用户

    阅读目录 一.第一个问题:Key-Value数据库可以有好多的Key,没错,但对MongoDB来说,大错特错 二.第二个问题:FindOne({_id:xxx})就快么? 三.第三个问题:精细的使用U ...

  8. 【Linux】进程优先级、进程nice值和%nice

    用top或者ps命令会输出PRI/PR.NI.%ni/%nice这三种指标值,这些到底是什么东西?先给出大概的解释如下: PRI :进程优先权,代表这个进程可被执行的优先级,其值越小,优先级就越高,越 ...

  9. 1.2、Django 视图与网址__进阶

    Django 视图与网址进阶 1.1.简单使用: 把我们新定义的app加到settings.py中的INSTALL_APPS中 修改 HelloDjango/HelloDjango/settings. ...

  10. javacript计时

    简单的计时: var t=setTimeout("alert('5 秒!')",5000) 无限计时: var c=0 var t function timedCount() { ...