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(" ...
随机推荐
- spark2.1.0 自定义AccumulatorV2累加少值(线程不安全)?
一.踩坑经历 自定义的accumulator是线程不安全的,会造成累加结果不正确.自定找了很久没想到是线程不安全行成的. 二.解决方法 创建一个线程安全的集合变量(我用的是Java的Concurren ...
- ef复杂模型添加
模型浏览器 函数导入-添加存储过程名称 添加复杂实体.复杂实体可以手动在xml里面创建.在complextype里面
- z-tree的使用
1.参考资料 1)官网:http://www.treejs.cn/v3/api.php 2)z-tree码云:https://gitee.com/zTree/zTree_v3 2.下载解压 案例演示: ...
- 【转】django rest framework ModelSerializer 、serializers小结
转自:https://blog.csdn.net/l_vip/article/details/79156113 引言 serializers是什么?官网是这样的”Serializers allow c ...
- SQL简介及分类
SQL (Structured Query Language) 结构化查询语言,定义了所有操作关系型数据库的规则,只要是关系型数据库都需要用SQL语句: 语法: 一行可以有多个SQL语句,以分号结尾: ...
- VirtualBox NAT Host-only模式下,自动分配IP上网。
修改宿主机上,virtualbox自建虚拟网卡Host-Only 2. 因为我使用了两个适配器,所以这两个适配器的名字分别是ifcfg-eth0, ifcfg-eth1. ifcfg-eh0一般默认就 ...
- centos7 安装 eclipse
1.到eclipse官网下载 https://www.eclipse.org/downloads/packages/ spring 官网 https://spring.io/tools3/eclips ...
- bootstrap基础讲解
Bootstrap基础简介 网站链接: http://www.bootcss.com/ bootstrap优点: 下载: bootstrap的引入: <meta name="view ...
- git本地分支推送到远程分支
1.创建的创建和初始化 创建git仓库可以在远端创建一个仓库, 然后check到本地,在本地的文件里创建工程文件,然后提交 也可以将本地现有的工程和远端的空仓库关联 本地创建了一个工程 iOSDemo ...
- mysql命令使用3
算术运算函数 sum()求和 mysql> select sum(price) from books;+------------+| sum(price) |+------------+| 10 ...