vue组件之间的传值方式
一.父组件向子组件传值方式
1.1父组件向子组件传数据方式
<!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>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<com1></com1>
</div>
<script> var vm=new Vue({
el:'#app',
data:{
msg:'123==啊父组件中的数据'
},
methods: { },
// 定义一个私有子的组件
components: {
// 来看下子组件能拿到vm父组件中的data里面的msg数据吗
// 结论：经过演示,发现,子组件中，默认无法访问到父组件的data上的数据和methods中的方法
// 那么子组件怎么获取到父组件的数据
com1:{
//这里会报错：子组件直接引用父组件的msg数据
template:'<h1>这是子组件--{{msg}}</h1>'
}
}
})
</script>
</body>
</html>
// 那么子组件怎么获取到父组件的数据： 父组件，可以在引用子组件的时候，通过熟悉绑定（v-bind）的形式，把需要传递给子组件的数据，以属性绑定的形式，子组件通过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>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 父组件，可以在引用子组件的时候，通过熟悉绑定（v-bind）的形式，把需要传递给子组件的数据，以属性绑定的形式， -->
<!-- 传递到子组件内部，供子组件使用 -->
<com1 v-bind:parentmsg="msg"></com1>
</div>
<script> var vm=new Vue({
el:'#app',
data:{
msg:'123==啊父组件中的数据'
},
methods: { },
// 定义一个私有子的组件
components: {
// 来看下子组件能拿到vm父组件中的data里面的msg数据吗
// 结论：经过演示,发现,子组件中，默认无法访问到父组件的data上的数据和methods中的方法
// 那么子组件怎么获取到父组件的数据
com1:{
data(){
// 注意：子组件中的data数据，并不是父组件传递过来的，而是子组件自身私有的，比如：子组件子组件通过ajax，
// 请求回来的数据，都可以放在data身上
return{
title:'123',
content:'qqq'
}
},
template:'<h1>这是子组件--{{parentmsg}}</h1>',
// 注意：组件中的所有props中的数据,都是通过父组件传递给子组件的
// 注意子组件中的data和props数据的区别：props只读，无法重新赋值，data数据都是可读可写
// props是一个数组，把父组件传递过来的parentmsg属性，先在props数组中定义一下，这样才能使用这个数据
props: ['parentmsg'] }
}
})
</script>
</body>
</html>
1.2父组件向子组件传递方法，使用的是事件绑定机制，子组件通过$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>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 如果是事件的话就用事件绑定机制 -->
<!-- 父组件向子组件传递方法，使用的是事件绑定机制 v-on，当我们自定义一个事件属性之后， -->
<!-- 那么子组件就能够，通过某些方式，来调用传递这个方法了 -->
<com2 v-on:func="show"></com2>
</div>
<template id="tmp1">
<div>
<h1>这是子组件</h1>
<input type="button" value="这是子组件中的按钮，-点击它，触发父组件传递过来的func方法" @click="myclick">
</div>
</template>
<script>
// 定义一个字面量类型的组件模板对象
var com2={
// 通过指定一个ID，表示说，要去加载这个指定ID的template元素中的内容，当作组件的HTML结构
template:'#tmp1',
methods:{
myclick(){
// 当点击子组件按钮的时候，如何拿到父组件传递过来的func方法，并调用这个方法
// emit触发
this.$emit('funcs')
}
}
}
var vm=new Vue({
el:'#app',
data:{
show(){
console.log('调用了父组件上的show方法')
}
},
methods: { },
components: {
com2
// 类似于 com2:com2 }
})
</script>
</body>
</html>
二.子组件向父组件传值
子组件向父组件传值成功
总结一下：
- 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
- 将需要传的值作为$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>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 如果是事件的话就用事件绑定机制 -->
<!-- 父组件向子组件传递方法，使用的是事件绑定机制 v-on，当我们自定义一个事件属性之后， -->
<!-- 那么子组件就能够，通过某些方式，来调用传递这个方法了 -->
<com2 v-on:func="show"></com2>
</div>
<template id="tmp1">
<div>
<h1>这是子组件</h1>
<input type="button" value="这是子组件中的按钮，-点击它，触发父组件传递过来的func方法" @click="myclick">
</div>
</template>
<script>
// 定义一个字面量类型的组件模板对象
var com2={
// 通过指定一个ID，表示说，要去加载这个指定ID的template元素中的内容，当作组件的HTML结构
template:'#tmp1',
methods:{
myclick(){
// 当点击子组件按钮的时候，如何拿到父组件传递过来的func方法，并调用这个方法
// 从第二个参数开始进行传参数
this.$emit('func',123)
}
}
}
var vm=new Vue({
el:'#app',
data:{
show(data){
console.log('调用了父组件上的show方法------'+data)
}
},
methods: { },
components: {
com2
// 类似于 com2:com2 }
})
</script>
</body>
</html>
子组件向父组件传值的方式
<!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>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 如果是事件的话就用事件绑定机制 -->
<!-- 父组件向子组件传递方法，使用的是事件绑定机制 v-on，当我们自定义一个事件属性之后， -->
<!-- 那么子组件就能够，通过某些方式，来调用传递这个方法了 -->
<com2 v-on:func="show"></com2>
</div>
<template id="tmp1">
<div>
<h1>这是子组件</h1>
<input type="button" value="这是子组件中的按钮，-点击它，触发父组件传递过来的func方法" @click="myclick">
</div>
</template>
<script>
// 定义一个字面量类型的组件模板对象
var com2={
// 通过指定一个ID，表示说，要去加载这个指定ID的template元素中的内容，当作组件的HTML结构
template:'#tmp1',
data(){
return{
sonmsg:{
name:'小头儿子',
age:6
}
}
},
methods:{
myclick(){
// 当点击子组件按钮的时候，如何拿到父组件传递过来的func方法，并调用这个方法
// 从第二个参数开始进行传参数
// this.$emit('func',123)
this.$emit('func',this.sonmsg)
}
}
}
var vm=new Vue({
el:'#app',
data:{
// 定义一个从儿子那里拿过来的数据
datamsgFromSon:null
},
methods: {
show(data){
// console.log('调用了父组件上的show方法------'+data)
console.log(data)
this.datamsgFromSon=data;
console.log(this.datamsgFromSon)
}
},
components: {
com2
// 类似于 com2:com2 }
})
</script>
</body>
</html>
发现一个可以查看的文章
https://www.cnblogs.com/daiwenru/p/6694530.html
vue组件之间的传值方式的更多相关文章
- 前端面试 vue 部分 (5)——VUE组件之间通信的方式有哪些
VUE组件之间通信的方式有哪些(SSS) 常见使用场景可以分为三类: 父子通信: null 父向子传递数据是通过 props ,子向父是通过 $emit / $on $emit / $bus Vuex ...
- vue 组件之间互相传值：兄弟组件通信
vue 组件之间互相传值:兄弟组件通信我们在项目中经常会遇到兄弟组件通信的情况.在大型项目中我们可以通过引入 vuex 轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入 vuex ...
- vue学习--组件之间的传值方式
1.概述 vue由多个组件构成页面,在不同的组件中有不同的联系,组件之间的传值是十分有必要的 2.父子组件之间传值 --props和$emit 父传子:通过props 方法:子组件:props:['m ...
- vue组件之间的传值——中央事件总线与跨组件之间的通信（$attrs、$listeners）
vue组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是 ...
- vue组件之间的传值
vue中组件之间的传值有好几种情况 1.父向子传值 父组件向子组件传值使用props,直接上实例 city.vue是父组件,list.vue是子组件city.vue里定义cities和hotCitie ...
- vue组件之间互相传值：父传子，子传父
今看到一篇很不错的vue组件传值文章,便于理解,遂做笔记- 一般页面的视图App.vue应为这样 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.v ...
- vue组件间的传值方式及方法调用汇总
1.传值 a.父组件传子组件 方法一: 父页面: <myReportContent v-if="contentState==1" :paramsProps='paramsPr ...
- vue 组件之间相互传值 父传子 子传父
1.父传子 把要传入的值放到父标签里 子组件使用props接收 父写法 子写法 2.子传父 子组件: childrenOnclick() { // 发布自定义事件 this.$emit(" ...
- vue组件之间通信传值
原文链接:https://blog.csdn.net/lander_xiong/article/details/79018737 我认为这位博主的这篇文章写的非常详细,通俗易懂, 我们这次的vue项目 ...
随机推荐
- spring cloud 学习笔记(1)
SpringCloud + Eureka / Nacos git:https://github.com/huanmsf/springCloudLearn.git 项目目录: 父pom: <?xm ...
- Win 10 系统下研华采集卡Advantech Navi SDK虚拟demo设备安装方法
研华的DAQNavi是其采集卡设备的.net编程SDK,安装了其通讯工具Navigator后,可以添加虚拟采集卡 demo device. 在Win10上,执行添加操作时,可能会出现添加失败,这是由于 ...
- vs/windows程序找不到入口点cuvidGetDecodeStatus于AppDecGL.exe动态链接库上
解决方法:这个问题的原因是由于使用的英伟达显卡驱动版本不够新,更新显卡驱动即可. 找了一个多月的原因,终于知道起源了.最终问题还是出在了nvcuvid.lib/.dll上面.通过分析vs调试信息可以得 ...
- hdu2181 简单搜索
题意: 一个规则的实心十二面体,它的 20个顶点标出世界著名的20个城市,你从一个城市出发经过每个城市刚好一次后回到出发的城市. Input前20行的第i行有3个数,表示与第i个城市相邻的3个城市.第 ...
- SVG初尝试(一)
SVG简介 SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector Graphics).其他图像格式都是基于像素处理的,SVG 则是属于对图像的形状描述,所以它 ...
- 常见jquery面试题
jQuery 面试问题和答案 JavaScript 是客户端脚本的标准语言,而 jQuery 使得编写 JavaScript 更加简单.你可以只用写几行的jQuery 代码就能实现更多的东西. 它是最 ...
- Spring 将请求参数封装成对象
简单描述:最近手里的模块,前后台之间需要传递很多的参数,使用封装的PageData,来获取请求参数的,作微服务迁移的时候,就涉及到需要把参数从pagedata里取出来,一个一个的放到对象的属性中.就很 ...
- thymleaf th:if判断某值不为空
简单描述:判断后台传递过来的值,是否为空,来做一些业务上的处理. 代码: <div class="col-md-6" th:if="${not #strings.i ...
- Scyther
1.Security Protocol :a domain analysis 一个安全协议描述了很多的行为,每一个行为称为角色,例如触发角色和 接受角色,一个系统有多个通信代理组成,每一个代理扮演 ...
- httpclient的封装完整版
applicationContext-httpclient.xml <?xml version="1.0" encoding="UTF-8"?> & ...