浅谈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模板的 初步使用方法与 应用 我们先来简单 ...
随机推荐
- LCP 34. 二叉树染色
class Solution: def maxValue(self, root: TreeNode, k: int) -> int: def dfs(root): # 空节点价值全为0 res ...
- kubectl工具安装指南
kubectl是一个用于连接Service Mesh控制平面的工具,可以安装在办公电脑的Windows系统上,也可以安装在虚拟机的Linux系统上,只要网络能与控制平面的公网地址互通即可.下面分别介绍 ...
- vue后台管理系统——数据统计模块
电商后台管理系统的功能--数据统计模块 1. 数据统计概述 数据统计模块主要用于统计电商平台运营过程的中的各种统计数据,并通过直观的可视化方式展示出来,方便相关运营和管理人员查看. 2. 用户来源数据 ...
- css中双冒号和单冒号区别
:--是指的伪类 ::--是指的伪元素 1.字面意思: 伪类,1.css中有类选择器,某些元素并未定义类名,就可以通过伪类赋予样式,如:[:nth-child(n)]:2.伪类可以应用于元素执行某种状 ...
- 基础框架SSM导学
SSM Spring SpringMVC Maven高级 SpringBoot MybatisPlus spring官网:http://spring.io
- vue npm安装指令汇总
1.elmentui:npm i element-ui -S 2.打印插件:npm install vue-print-nb --save 3.时间转换插件Moment:npm install mom ...
- MLR算法双面网络时钟
MLR算法双面网络时钟------专业LED时钟厂家![点击进入] MLR算法双面网络时钟 NTP电子时钟功能说明: 双面NTP电子时钟采用独特结构设计,可根据客户要求订制显示布局:年.月.日.时.分 ...
- 阿里云Linux服务器部署JDK8实战教程
下载地址 https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 文件上传 把下载的文 ...
- Docker 容器与镜像
列出所有容器ID :docker ps -aq 查看所有运行或者不运行容器:docker ps -a 停止所有的container(容器),这样才能够删除其中的images:docker stop $ ...
- ZooKeeper启动报错，未成功开启服务
1.问题示例 (1)启动ZooKeeper服务报错 [Hadoop@master ~]$ zkServer.sh statusZooKeeper JMX enabled by defaultUsing ...