vue组件间的参数传递实例详解


Posted in Javascript onApril 26, 2019

场景分析

在前端开发中,我们常常会运用到“组件库”。在main入口中引入组件库,就可以很轻松的在页面中引入,并做一些基本的配置,如样式,颜色等。只需要在引入的组件中写入特定的属性,就能够定义。

举例说明

例如:element-ui组件库中使用switch开关,有个属性active-color是设置“打开时”的背景色。change事件是触发状态的事件。

<el-switch
 v-model="value"
 :active-color="activecolor"
 @change="touchSwitch">
</el-switch>

<script>
 export default {
  data() {
   return {
    value: true,
    activecolor: '#13ce66'
   }
  },
  methods: {
   touchSwitch () {
    // 这里入方法
   }
  }
 };
</script>

分析代码

我们分析上面的代码

首先我们可以看到active-color是将特定的数据传给组件,也就是父传子组件。

其次是@change虽然监听的是改变事件,但是语法糖依然是$emit,什么emit我们在以后的文章中会讲到,就是“抛出事件”。

这就分为组件的最基本功能:

•数据进
•事件出

那组件的使用我们知道了,通过active-color传入参数,通过@来接收事件。
 所以,我们来探究一下组件的内部结构是什么样的?

我写了一个小模型,是一个显示标题的小按钮,通过div包裹。

<!-- type-box.vue -->
<template>
 <div class="box" @click="ai_click(title)">{{title}}</div>
</template>

<script>
export default {
 name: 'type-box',
 props: {
  title: {
   type: String,
   default: () => ''
  }
 },
 methods: {
  ai_click (title) {
   this.$emit('ai_click', title)
  }
 }
}
</script>

<style scoped>
 .box{
  width: 250px;
  height: 100px;
  margin: 10px;
  border-radius: 10px;
  background-color: #3a8ee6;
  color: white;
  font-size: 25px;
  line-height: 100px;
  text-align: center;
  cursor: pointer;
 }
</style>

使用方法:

<!-- 父组件使用 -->
<template>
 <div>
  <type-box title="演示盒子" @ai_click=“touch”></type-box>
 </div>
</template>
<script>
import typeBox from './type-box'
export default {
 components: {
  typeBox
 },
 methods: {
  touch (data) {
   console.log(data)
  }
 }
}
</script>

分析组件

接收

通过props接收父组件传递过来的数据,通过工厂函数获取一个默认值。

传递

通过this.$emit('ai_click', title)告诉父组件,我要传递一个事件,名字叫“ai_click”,请通过@ai_click接收一下,并且我将title的值返回父组件。

总结

所以今天分析vue组件的3大核心概念的其中两个——属性和事件。

 这篇文章只分析到应用场景,也是最简单的组件。希望后续能够深入了解vue的组件概念:属性、事件和插槽。

以上所述是小编给大家介绍的vue组件间的参数传递实例详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
javascript实现的鼠标链接提示效果生成器代码
Jun 28 Javascript
屏蔽F1~F12的快捷键的js函数
May 06 Javascript
Textarea与懒惰渲染实现代码
Jan 04 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
Sep 16 Javascript
javascript匿名函数应用示例介绍
Mar 07 Javascript
深入理解JavaScript中的对象
Jun 04 Javascript
vue-cli中的babel配置文件.babelrc实例详解
Feb 22 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
May 16 Javascript
vue脚手架搭建项目的兼容性配置详解
Jul 17 Javascript
vue中多个倒计时实现代码实例
Mar 27 Javascript
通过实例讲解JS如何防抖动
Jun 15 Javascript
Vue-axios-post数据后端接不到问题解决
Jan 09 Javascript
详解VUE前端按钮权限控制
Apr 26 #Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 #Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 #Javascript
微信小程序实现的绘制table表格功能示例
Apr 26 #Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
Apr 26 #Javascript
微信小程序如何修改本地缓存key中单个数据的详解
Apr 26 #Javascript
js验证身份证号码记录的方法
Apr 26 #Javascript
You might like
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
模拟select的代码
2011/10/19 Javascript
Jquery实现控件的隐藏和显示实例
2014/02/08 Javascript
js修改onclick动作的四种方法(推荐)
2016/08/18 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
仿京东快报向上滚动的实例
2017/12/13 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
JS代码实现电脑配置检测功能
2018/03/21 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
微信小程序实现多个按钮的颜色状态转换
2019/02/15 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
Vue函数式组件-你值得拥有
2019/05/09 Javascript
JavaScript展开操作符(Spread operator)详解
2019/07/20 Javascript
使用Layui搭建后台管理界面的操作方法
2019/09/20 Javascript
跟老齐学Python之玩转字符串(1)
2014/09/14 Python
python模拟事件触发机制详解
2018/01/19 Python
python八皇后问题的解决方法
2018/09/27 Python
python判断完全平方数的方法
2018/11/13 Python
Python实现计算字符串中出现次数最多的字符示例
2019/01/21 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
python银行系统实现源码
2019/10/25 Python
利用PyCharm操作Github(仓库新建、更新,代码回滚)
2019/12/18 Python
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
Python实现Kerberos用户的增删改查操作
2020/12/14 Python
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
2016/04/26 HTML / CSS
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
2018/02/01 HTML / CSS
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
中国综合性网上购物商城:当当(网上卖书起家)
2016/11/16 全球购物
日本最大级玩偶手办购物:あみあみ Amiami
2018/04/23 全球购物
小学公民道德宣传日活动总结
2015/03/23 职场文书
运动会1000米加油稿
2015/07/21 职场文书
KTV员工管理制度
2015/08/06 职场文书
教师远程研修感悟
2015/11/18 职场文书
QT与javascript交互数据的实现
2021/05/26 Javascript
python中if和elif的区别介绍
2021/11/07 Python
php实现自动生成验证码的实例讲解
2021/11/17 PHP