一、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组件命名和传值的更多相关文章

  1. vue组件命名和传值 and 父子组件传值

    https://www.cnblogs.com/lianxisheng/p/10907350.html

  2. vue 组件之间互相传值:兄弟组件通信

    vue 组件之间互相传值:兄弟组件通信我们在项目中经常会遇到兄弟组件通信的情况.在大型项目中我们可以通过引入 vuex 轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入 vuex ...

  3. VUE 组件通信、传值

    一.通过路由进行带参传值: 两个组件A和B,A组件通过query把orderId传递给B组件(触发事件可以是点击事件.钩子函数等) this.$router.push({path:'/componen ...

  4. EasyDSS RTMP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值

    之前接触最多的都是EasyNVR,主要针对的都是前端的一些问题.也有接触到一些easydss流媒体服务器. 前端方面的,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是 ...

  5. vue组件之间互相传值:父传子,子传父

    今看到一篇很不错的vue组件传值文章,便于理解,遂做笔记- 一般页面的视图App.vue应为这样 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.v ...

  6. vue组件之间的传值——中央事件总线与跨组件之间的通信($attrs、$listeners)

    vue组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是 ...

  7. EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值

    前端方面,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是传统的js来进行开发,而EasyDSS使用的是webpack+vue来进行开发的,了解vue+webpack的 ...

  8. vue组件之间的传值

    vue中组件之间的传值有好几种情况 1.父向子传值 父组件向子组件传值使用props,直接上实例 city.vue是父组件,list.vue是子组件city.vue里定义cities和hotCitie ...

  9. vue 组件之间相互传值 父传子 子传父

    1.父传子 把要传入的值放到父标签里  子组件使用props接收 父写法 子写法 2.子传父 子组件: childrenOnclick() { // 发布自定义事件 this.$emit(" ...

随机推荐

  1. 【NOIP2016提高A组集训第4场11.1】平衡的子集

    题目 夏令营有N个人,每个人的力气为M(i).请大家从这N个人中选出若干人,如果这些人可以分成两组且两组力气之和完全相等,则称为一个合法的选法,问有多少种合法的选法? 分析 如果暴力枚举每个人被分到哪 ...

  2. Springboot(2.0.0.RELEASE)+spark(2.1.0)框架整合到jar包成功发布(原创)!!!

    一.前言 首先说明一下,这个框架的整合可能对大神来说十分容易,但是对我来说十分不易,踩了不少坑.虽然整合的时间不长,但是值得来纪念下!!!我个人开发工具比较喜欢IDEA,创建的springboot的j ...

  3. SQL复杂筛选

    SELECT A.MATERIALID,A.MATERIALNAME,ISNULL(A.COMPIDSEQ,'') COMPIDSEQ,ISNULL(A.SUPPLYID,'') SUPPLYID,S ...

  4. POJ 2492 A Bug's Life (带权并查集 && 向量偏移)

    题意 : 给你 n 只虫且性别只有公母, 接下来给出 m 个关系, 这 m 个关系中都是代表这两只虫能够交配, 就是默认异性, 问你在给出的关系中有没有与异性交配这一事实相反的, 即同性之间给出了交配 ...

  5. 51 Nod 1678 lyk与gcd(容斥原理)

    1678 lyk与gcd  基准时间限制:2 秒 空间限制:131072 KB 分值: 80 难度:5级算法题  收藏  关注 这天,lyk又和gcd杠上了. 它拥有一个n个数的数列,它想实现两种操作 ...

  6. 2019hdu多校 Fansblog

    Problem Description Farmer John keeps a website called 'FansBlog' .Everyday , there are many people ...

  7. BZOJ1491 Red is good

    题目链接:Click here Solution: 考虑设\(f(i,j)\)表示当前还有\(i\)张红牌,\(j\)张黑牌时的期望收益 易得状态转移方程:\(f(i,j)=\frac{i}{i+j} ...

  8. Quartz监听器

    1.概念Quartz的监听器用于当任务调度中你所关注事件发生时,能够及时获取这一事件的通知.类似于任务执行过程中的邮件.短信类的提醒.Quartz监听器主要有JobListener.TriggerLi ...

  9. Model-Agnostic Meta-Learning for Fast Adaptation of Deep Networks(用于深度网络快速适应的元学习)

    摘要:我们提出了一种不依赖模型的元学习算法,它与任何梯度下降训练的模型兼容,适用于各种不同的学习问题,包括分类.回归和强化学习.元学习的目标是在各种学习任务上训练一个模型,这样它只需要少量的训练样本就 ...

  10. python中加入中文注释报错处理

    python中加入中文注释,运行报错如下 解决方法: 在py文件的第一行加入   #coding:utf-8  即可