浅谈Vue 2.x当中组件之间传值方式
一、父子之间传值
1、 父传子 ：props
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<my-list :list="list" :num="list.length"></my-list>
<hr />
<my-list></my-list>
</div>
</body>
<template id="list">
<ul>
<li v-for="(item, index) of list" :key = "index">
<img :src="item.img" alt="" style="display:block;width: 150px;height: 150px;border: 1px solid #f66">
{{ item.title }}
</li>
</ul>
</template>
<script src="vue.js"></script>
<script>
const List = {
props: {
list: {
type: Array,
default: function () {
return [
{
img: '1',
title: '您还没有传值哦'
}
]
}
}
},
template: '#list'
}
// 全局注册组件
// Vue.component('my-list', List)
new Vue({
el: '#app',
data: {
list: [{
img: 'https://m.360buyimg.com/mobilecms/s750x750_jfs/t23491/230/1714105950/260598/44036572/5b680745N534fe714.jpg!q80.dpg.webp',
title: '七匹狼中长款夹克男春季新款时尚立领外套休闲男装茄克衫 001(黑色) 175/92A(XL)'
}, {
img:'https://m.360buyimg.com/mobilecms/s750x750_jfs/t23386/9/1066712099/277967/615ccafb/5b4f0e3aN262237fc.jpg!q80.dpg.webp',
title: '【官方AppleCare+版】Apple MacBook Pro 15.4英寸笔记本电脑 深空灰色 配备Touch Bar 2018新款(八代i5/16G)'
}]
},
components: {
'my-list': List
}
})
</script>
</html>
2、子传父 emit
在父组件调用子组件的地方，给它绑定一个自定义的事件,事件的执行是由父组件执行，记住不要加()
在子组件定义的地方，在需要传值的函数内部，执行 this.$emit('自定义的事件名', '传递的值') ---- 触发自定义的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>这里是父组件</h1>
<h2>子组件的值是： {{ msg }}</h2>
<my-child @to-parent="getdata"></my-child>
</div>
</body>
<template id="child">
<div>
<button @click="sendData">给父组件传值</button>
</div>
</template>
<script src="vue.js"></script>
<script>
const Child = {
template: '#child',
methods: {
sendData () {
this.$emit('to-parent', '啦啦啦啦啊啊啦')
}
}
}
new Vue({
el: '#app',
data: {
msg: ''
},
components: {
'my-child': Child
},
methods: {
getdata (val) {
this.msg = val
}
}
})
</script>
</html>
3、父传子 $parent
父组件
<template>
<div>
<h1>父组件</h1>
<h-child></h-child>
</div>
</template>
<script>
// 引入子组件
import HChild from './Child'
export default {
name: 'Parent',
components: {
HChild
},
data () {
return {
msg: 'data from parent'
}
},
methods: {
fun () {
console.log('parent fun')
}
}
}
</script>
子组件
<template>
<div>
<h1>子组件</h1>
<button @click="showParent">调用父组件的数据和方法</button>
</div>
</template>
<script>
export default {
name: 'Child',
methods: {
showParent () {
// 获取到所有的子组件
console.log(this.$parent)
// 获取指定子组件中的指定数据
console.log(this.$parent.msg)
// 调用子组件的方法
this.$parent.fun()
}
}
}
</script>
4、子传父 $children
子组件
<template>
<div>
<h1>子组件</h1>
</div>
</template>
<script>
export default {
name: 'Child',
data () {
return {
msg: 'msg from child'
}
},
methods: {
fun () {
console.log('child fun')
}
}
}
</script>
父组件
<template>
<div>
<h1>父组件</h1>
<h-child></h-child>
</div>
</template>
<script>
// 引入子组件
import HChild from './Child'
export default {
name: 'Parent',
components: {
HChild
},
mounted () {
// 获取到所有的子组件，结果是一个数组
console.log(this.$children)
// 获取指定子组件中的指定数据
console.log(this.$children[0].msg)
// 调用子组件的方法
this.$children[0].fun()
}
}
</script>
5、ref （绑定字子组件上可以获取子组件中data值，绑定在dom上可获得dom元素）
父组件
<template>
<div class="box">
<Header >
<div slot="left">你好</div>
<div slot="right" @click="userFn">你好</div>
</Header>
<div class="content">
<h1 ref="title" id="title">标题</h1>
<p ref="desc" id="desc">段落描述</p>
<button @click="getDOM">获取DOM节点</button>
<Reftest ref="test"/>
<button @click="getData">获取子元素数据</button>
</div>
</div>
</template>
<script>
import Header from '@/mixins/header'
import Reftest from '@/mixins/header'
export default {
mixins:[Header,Reftest],
data(){
return {
message:'父组件'
}
},
methods: {
getDOM () {
console.log(document.getElementById('title'))
console.log(document.getElementById('desc'))
console.log('----------------------')
console.log(this.$refs.title)
console.log(this.$refs.desc)
},
getData(){
this.$refs.test.msg='奶牛'
console.log(this.$refs.test.msg)
}, }
}
</script>
子组件
<template>
<div>
<button @click="getData">子组件直接获取父组件的数据</button>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'child-----------------------------'
}
},
methods: {
getData () {
console.log(this.$parent.message)
}
}
}
</script>
6、Provide、inject （官方不推荐使用，但是写组件库时很常用）
父组件
<template>
<div id="app">
</div>
</template>
<script>
export default {
data () {
return {
datas: [
{
id: 1,
label: '产品一'
}
]
}
},
provide {
return {
datas: this.datas
}
}
}
</script>
子组件
<template>
<div>
<ul>
<li v-for="(item, index) in datas" :key="index">
{{ item.label }}
</li>
</ul>
</div>
</template>
<script>
export default {
inject: ['datas']
}
</script>
二、兄弟组件之间传值
1、利用new Vue()实例作为中央事件总线 Vue.prototype.$bus = new Vue（）
在需要接收数据的组件内部，先监听某一个自定义的事件,接收传递过来的数据
在需要传递数据的组件内部的某一个函数内，去触发 一个 自定义的事件，发送传递的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<my-content></my-content>
<my-footer></my-footer>
</div>
</body>
<template id="content">
<div>
内容 - {{ type }}
</div>
</template>
<template id="footer">
<ul>
<li @click="changeContent('首页')">首页</li>
<li @click="changeContent('分类')">分类</li>
<li @click="changeContent('购物车')">购物车</li>
<li @click="changeContent('我的')">我的</li>
</ul>
</template>
<script src="vue.js"></script>
<script>
const bus = new Vue()
const Content = {
template: '#content',
data () {
return {
type: ''
}
},
mounted () { // 用来监听点击的是哪一个
bus.$on('footer-content', (val) => {
this.type = val
})
}
}
const Footer = {
template: '#footer',
methods: {
changeContent (val) {
bus.$emit('footer-content', val)
}
},
mounted () {
bus.$emit('footer-content', '首页')
}
} new Vue({
el: '#app',
components: {
'my-content': Content,
'my-footer': Footer
}
})
</script>
</html>
三、跨级组件通信
1、$attrs 接收除了props声明外的所有绑定属性（class、style除外）
//parent组件
<template>
<div>
<Son :name='name' :age='age'/>
</div>
</template>
<script>
export default {
data() {
return {
name: 'Eric',
age: '20'
}
}
}
</script> //Son组件
<template>
<div>
//此时Son组件把从父组件传来的数据，在传给孙组件
<GrandSon v-bind='$attrs'/>
</div>
</template>
<script>
export default {
props: ['name'],
mounted() {
//父组件共传来连个值，一个name， 一个age，由于name被props接收了，故$attrs 只有age属性
console.log(this.$attrs) //{age: '20'}
}
}
</script> //GrandSon组件
<template>
<div>
这是孙组件
</div>
</template>
<script>
export default {
mounted() {
//这样父祖组件就把数据传到了孙组件
console.log(this.$attrs) // {age: '20'}
}
}
</script>
2、$listeners 接收除了带有.native事件修饰符的所有事件监听器
//parent组件
<template>
<div>
<Son @eventOne='eventHandler' @click.native='clickHandler'/>
</div>
</template>
<script>
export default {
methods: {
eventHandler() {
console.log('触发了Parent中的eventHandler')
},
clickHandler() {
console.log('触发了Parent中的clickHandler')
}
}
}
</script> //Son组件
<template>
<div>
//此时Son组件把从父组件传来的监听器，在传给孙组件
<GrandSon v-on='$listerners'/>
</div>
</template>
<script>
export default {
mounted() {
//父组件监听了两个事件，一个eventOne， 一个click，由于click被native修饰了，故$listerners 只有eventOne事件
console.log(this.$listerners) //{eventOne: fn}
this.$emit('eventOne') //可以触发Parent组件中的eventHandler函数
}
}
</script> //GrandSon组件
<template>
<div>
这是孙组件
</div>
</template>
<script>
export default {
mounted() {
//这样孙组件通过emit触发Parent组件中的监听函数
console.log(this.$listerners) // {eventOne: fn}
this.$emit('eventOne') //可以触发Parent组件中的eventHandler函数
}
}
</script>
四、通用组件传值 Vuex
不说了 vuex yyds用就完事了
浅谈Vue 2.x当中组件之间传值方式的更多相关文章
- 浅谈Vue不同场景下组件间的数据交流
浅谈Vue不同场景下组件间的数据“交流” Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...
- 【Vue】浅谈Vue不同场景下组件间的数据交流
浅谈Vue不同场景下组件间的数据“交流” Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...
- vue组件之间传值方式解析
vue组件之间传值方式解析一.父组件传到子组件 1.父组件parent代码如下: <template> <div class="parent"> <h ...
- react组件之间传值方式
1.父向子(通过props传值) 2.父向更深层的子(通过context传值) 3.子向父(通过回调函数传值:在父组件中创建一个函数来接收子组件传过来的参数值,通过父组件将这个函数做为子组件的属性传递 ...
- vue简单的父子组件之间传值
todo-list为例子: 代码: 父传子--------------属性 v-bind 子传父--------------$emit <!DOCTYPE html> <html ...
- 浅谈Asp.Net中的几种传值方式
一.使用Querystring Querystring是一种非常简单的传值方式,其缺点就是会把要传送的值显示在浏览器的地址栏中,并且在此方法中不能够传递对象.如果你想传递一个安全性不是那么太重要或者是 ...
- 从0开始探究vue-组件化-组件之间传值
理解 Vue中有个非常重要的核心思想,就是组件化,组件化是为了代码复用 什么是组件化 组件化,就像一个电脑主机里的主板,有内存条的插口,有硬盘,光驱等等的插口,我们的项目,就像一个电脑主机,通过各种组 ...
- 浅谈Vue.js
作为一名Vue.js的忠实用户,我想有必要写点文章来歌颂这一门美好的语言了,我给它的总体评价是“简单却不失优雅,小巧而不乏大匠”,下面将围绕这句话给大家介绍Vue.js,希望能够激发你对Vue.js的 ...
- 浅谈Vue响应式(数组变异方法)
很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用 ...
- 浅谈Vue下的components模板
浅谈Vue下的components模板在我们越来越深入Vue时,我们会发现我们对HTML代码的工程量会越来越少,今天我们来谈谈Vue下的 components模板的 初步使用方法与 应用 我们先来简单 ...
随机推荐
- Error running 'tm8': Cannot load C:\Users\Administrator\.IntelliJIdea2019.3\system\tomcat\Unnamed_jymes_3\conf\server.xml (系统找不到指定的文件。)
救命救命,由于脑壳被门夹了去更改了idea的配置,导致重启项目报错!又是给自己挖坑的一天,唉!!! 主要是看报错信息还一直以为是tomcat的问题,然后试了很多方法,比如查看配置的tomcat路径.重 ...
- java 操作PDF （spire.pdf）api
https://www.e-iceblue.cn/pdf_java_image_shapes/replace-image-with-new-image-in-pdf-in-java.html mave ...
- mysql之存储引擎-第二篇
什么是存储引擎? 数据库存储引擎是数据库底层软件组件,数据库管理系统使用数据引擎进行创建,查询,更新和删除数据操作.不同的存储引擎提供了不同的存储机制,索引技巧及特定功能. 存储引擎类型 InnoDB ...
- SQLite 帮助类
public static class SqliteHelper { /// <summary> /// 获得连接对象 /// </summary> /// <retur ...
- java初学者-手动输入一个整数，打印这个数是几位数
import.java.until.Scanner; //手动输入一个整数,打印这个数是几位数 public static void main(String[]args){ //键盘录入 Scanne ...
- 关于pandas的一些用法
pandas用法之前我总是把他想的无比复杂.其实也是比较简单的,这个东西在做数据统计的时候还是挺好用的. 然后这里列举几个比较好用的几段代码.偏向数据透视类型pivot的,导出方式是直接在IDE 生成 ...
- SSD目标检测网络解读（含网络结构和内容解读）
SSD实现思路 SSD具有如下主要特点: 从YOLO中继承了将detection转化为regression的思路,一次完成目标定位与分类 基于Faster RCNN中的Anchor,提出了相似的Pri ...
- P2212 Watering the Fields S
题目描述 给定n个点,第i个点的坐标为(xi,yi)(xi,yi),如果想连通第i个点与第j个点,需要耗费的代价为两点的距离.第i个点与第j个点之间的距离使用欧几里得距离进行计算,即:(xi-xj ...
- CF 1272 D. Remove One Element
D. Remove One Element time limit per test 2 seconds memory limit per test 256 megabytes input standa ...
- html超链接相关代码
1. <IDOCTYPE html>< html><head><title>图像和超链接</title><meta http-equi ...