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项目 ...
随机推荐
- 适合高要求应用的高性能MEMS IMU解决方案
对于复杂且高动态惯性配置的MEMS IMU应用,评估功能时需要考虑许多属性.在设计周期早期评估这些属性优于追逐开放性成果,从而实现“尽可能精确”.ADI近期举行的在线研讨会[适合高要求应用的高性能ME ...
- 基于Python的Webservice开发(三)-Django安装配置
一.安装Django pip install django 二.创建项目 进入指定的目录后 django-admin startproject WebApi 目录说明: WebApi 项目的容器. m ...
- computed计算属性
在computed中,可以定义一些属性,这些属性 叫做计算属性.计算属性的本质是一个方法,只不过我们在使用的时候,把他们的名称当做属性来使用,并不会吧计算属性当做方法去调用.与methods平级. / ...
- openpyxl使用sheet.rows或sheet.columns报TypeError: 'generator' object is not subscriptable解决方式
解决方案: 因为新版本的openpyxl使用rows或者columns返回一个生成器所以可以使用List来解决报错问题 >>> sheet.columns[0] Traceback ...
- ConditionalOnBean 与 ConditionalOnMissingBean 的正确玩法
之前看到这篇博客,写ConditionalOnClass的用法,自己实践了一下,感觉有点问题,原文如下: https://blog.csdn.net/lucyTheSlayer/article/det ...
- git私有仓库与pycharm联合使用
文章目录 1 创建git私有仓库和pycharm的使用 1.1 克隆私有仓库到本地 1.2 使用pycharm打开 1.3 添加.gitignore文件 1.4 并将其添加到仓库 1.5 提交和推送 ...
- python+selenium自动测试之WebDriver的常用API（基础篇二）
本篇介绍一下python+selenium复杂操作的处理,基于python3.6,selenium3.141,详细资料介绍查看官方API文档,点击这里 一.常见特殊情况处理如iframe/弹窗处理 有 ...
- pwn学习（2）
0x00 序 之前学了蒸米大佬的ropx86,本次学习 ropx64 0x01 Leak Memory & Dynelf 蒸米大佬使用pwntools的Dynelf模块来获取函数地址, ...
- Redis实战 - 3.Hash
hash Redis的Hash有点像一个对象(object),一个Hash里面可以存多个Key-Value对作为它的field,所以它通常可以用来表示对象. Hash里面能存放的值也能作为String ...
- Spark2.0.0内存管理
来源:http://spark.apache.org/docs/2.0.0/configuration.html spark中的内存使用主要分为两类:执行和存储.执行内存指的是用于shuffles.j ...