vue组件命名和传值
一、vue组件命名:
组件有好几种命名方式, 可以使用 component-vue (短横线分隔命名)、componentVue (驼峰式命名) 或ComponentVue (单词首字母)
因为html对大小写不敏感, 所以在调用的时候驼峰命名的都要写成短线分割形式:
以上三种都要写成小写短线这种形式:
<component-vue></component-vue>
在使用props传值的时候也是这样
Vue.component('blogPost', {
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})
<blogPost post-title="hello!"></blogPost>
一、vue传值:
1.父传子
父组件:
<template>
<div>
<child :input-name="name"></child> //inputName就是要传的值
</div>
</template>
<script>
import child from './child' //引入子组件
export default {
components: {
child
},
data () {
return {
name: ''
}
}
}
</script>
子组件:
<template>
<div>
子组件:
<span>{{inputName}}</span>
</div>
</template>
<script>
export default {
props: {
inputName: String, //定义传值的类型为string
},
props:['inputName'], //普通传值
}
</script>
2.子传父: 子传父需要通过事件来实现, 再用 this.$emit 传送事件和值
子组件
<template>
<div>
子组件:
<!-- 定义一个子组件传值的方法 -->
<input type="button" value="点击触发" @click="childClick">
</div>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
childClick () {
// 第一个参数就是父组件要调用的方法
// 第二个参数就是子组件要传的值
this.$emit('childByValue', this.childValue)
}
}
}
</script>
父组件:
<template>
<div>
<!-- 引入子组件 定义一个on的方法监听子组件的状态-->
<child v-on:childByValue="childByValue"></child>
</div>
</template>
<script>
import child from './child'
export default {
components: {
child
},
data () { },
methods: {
childByValue: function (childValue) {
//childValue, 就只你传过来的值
}
}
}
</script>
3.非父子组件传值: 非父子组件传值, 需要用到一个中转站, 这个中转站一般用bus.js, 其用法和子传父有点相似,
先创建一个bus, 在两个需要传值的文件引入, 在传值的一方用 bus.emit 传递载荷, 在接受的一方用bus.$on接受
bus.js: 创建一个空的vue实例:
import Vue from 'vue'
export default new Vue()
A组件:
<template>
<div>
<input type="button" value="点击触发" @click="elementByValue">
</div>
</template>
<script>
// 引入公共的bug,来做为中间传达的工具
import Bus from './bus.js'
export default {
data () {
},
methods: {
elementByValue: function () {
Bus.$emit('val', this.elementValue)
}
}
}
</script>
B组件:
<template>
<div>
<input type="button">
<span>{{name}}</span>
</div>
</template>
<script>
import Bus from './bus.js'
export default {
data () {
return {
}
},
mounted: function () {
// 用$on事件来接收参数
Bus.$on('val', (data) => {
//data就是值
})
},
}
</script>
vue组件命名和传值的更多相关文章
- vue组件命名和传值 and 父子组件传值
https://www.cnblogs.com/lianxisheng/p/10907350.html
- vue 组件之间互相传值:兄弟组件通信
vue 组件之间互相传值:兄弟组件通信我们在项目中经常会遇到兄弟组件通信的情况.在大型项目中我们可以通过引入 vuex 轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入 vuex ...
- VUE 组件通信、传值
一.通过路由进行带参传值: 两个组件A和B,A组件通过query把orderId传递给B组件(触发事件可以是点击事件.钩子函数等) this.$router.push({path:'/componen ...
- EasyDSS RTMP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值
之前接触最多的都是EasyNVR,主要针对的都是前端的一些问题.也有接触到一些easydss流媒体服务器. 前端方面的,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是 ...
- vue组件之间互相传值:父传子,子传父
今看到一篇很不错的vue组件传值文章,便于理解,遂做笔记- 一般页面的视图App.vue应为这样 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.v ...
- vue组件之间的传值——中央事件总线与跨组件之间的通信($attrs、$listeners)
vue组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是 ...
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值
前端方面,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是传统的js来进行开发,而EasyDSS使用的是webpack+vue来进行开发的,了解vue+webpack的 ...
- vue组件之间的传值
vue中组件之间的传值有好几种情况 1.父向子传值 父组件向子组件传值使用props,直接上实例 city.vue是父组件,list.vue是子组件city.vue里定义cities和hotCitie ...
- vue 组件之间相互传值 父传子 子传父
1.父传子 把要传入的值放到父标签里 子组件使用props接收 父写法 子写法 2.子传父 子组件: childrenOnclick() { // 发布自定义事件 this.$emit(" ...
随机推荐
- 【NOIP2016提高A组集训第4场11.1】平衡的子集
题目 夏令营有N个人,每个人的力气为M(i).请大家从这N个人中选出若干人,如果这些人可以分成两组且两组力气之和完全相等,则称为一个合法的选法,问有多少种合法的选法? 分析 如果暴力枚举每个人被分到哪 ...
- Springboot(2.0.0.RELEASE)+spark(2.1.0)框架整合到jar包成功发布(原创)!!!
一.前言 首先说明一下,这个框架的整合可能对大神来说十分容易,但是对我来说十分不易,踩了不少坑.虽然整合的时间不长,但是值得来纪念下!!!我个人开发工具比较喜欢IDEA,创建的springboot的j ...
- SQL复杂筛选
SELECT A.MATERIALID,A.MATERIALNAME,ISNULL(A.COMPIDSEQ,'') COMPIDSEQ,ISNULL(A.SUPPLYID,'') SUPPLYID,S ...
- POJ 2492 A Bug's Life (带权并查集 && 向量偏移)
题意 : 给你 n 只虫且性别只有公母, 接下来给出 m 个关系, 这 m 个关系中都是代表这两只虫能够交配, 就是默认异性, 问你在给出的关系中有没有与异性交配这一事实相反的, 即同性之间给出了交配 ...
- 51 Nod 1678 lyk与gcd(容斥原理)
1678 lyk与gcd 基准时间限制:2 秒 空间限制:131072 KB 分值: 80 难度:5级算法题 收藏 关注 这天,lyk又和gcd杠上了. 它拥有一个n个数的数列,它想实现两种操作 ...
- 2019hdu多校 Fansblog
Problem Description Farmer John keeps a website called 'FansBlog' .Everyday , there are many people ...
- BZOJ1491 Red is good
题目链接:Click here Solution: 考虑设\(f(i,j)\)表示当前还有\(i\)张红牌,\(j\)张黑牌时的期望收益 易得状态转移方程:\(f(i,j)=\frac{i}{i+j} ...
- Quartz监听器
1.概念Quartz的监听器用于当任务调度中你所关注事件发生时,能够及时获取这一事件的通知.类似于任务执行过程中的邮件.短信类的提醒.Quartz监听器主要有JobListener.TriggerLi ...
- Model-Agnostic Meta-Learning for Fast Adaptation of Deep Networks(用于深度网络快速适应的元学习)
摘要:我们提出了一种不依赖模型的元学习算法,它与任何梯度下降训练的模型兼容,适用于各种不同的学习问题,包括分类.回归和强化学习.元学习的目标是在各种学习任务上训练一个模型,这样它只需要少量的训练样本就 ...
- python中加入中文注释报错处理
python中加入中文注释,运行报错如下 解决方法: 在py文件的第一行加入 #coding:utf-8 即可