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项目 ...
随机推荐
- Java基础13-字符串缓冲流;字节流
作业解析 描述HashMap内部实现原理 HashMap是一种存储机制,存储的是key-value对,key用来保证元素的唯一性.通过hash算法将要存储的对象打散,分布在不同的区间中. 当添加对象时 ...
- 防盗链之URL参数签名
一.概述 传统的 IP 禁用.referer 防盗链.User-Agent 防盗链.地区访问控制等防盗链措施已经无法完全满足用户要求,所以开发出URL参数签名方式来防盗链 二.实现 Token防盗链是 ...
- osgearth介绍
osgEarth为开发osg应用提供了一个地理空间SDK和地形引擎． osgEarth的目标: l 提供基于osg开发3D地理空间应用的支持; l 直接从数据源可视化地形模型和影像变得更加简单: l ...
- 题解 P4705 【玩游戏】
这题是真的神仙啊...居然用的 stl 来卡常? 话说 998244353 真的可以一眼 NTT ? noteskey 所以说只要推柿子就好了但是有的地方的推导根本就想不到... 我们令第 t 个答案 ...
- .net core WebAPI 初探及连接MySQL
1. 前言 笔者最近跟着微软官方文档学习.net core WebAPI,但发现其对 WebAPI 连接数据库.读取数据库方面讲得不够细致明了.写此文的目的,即实现 .net core WebAPI ...
- GDOI2019游记
只是提前开坑啊,CCF不要禁我赛啊QwQ 虽然才初三,不能进省队,但还是要拼一把,至少不能垫底吧. NTF和CDW两位初二巨佬都在四川省选拿了非正式选手Rank3,4,我还有什么理由去摸鱼? Day\ ...
- SSM框架中写sql在dao文件中以注解的方式
1以注解方式 //两个参数其中一个是对象需写,对象.属性 @Update("update delivery_address set consignee = #{address.consign ...
- WPF使用CefSharp嵌入网页
1.点击项目应用下的管理NuGet程序包 2.在浏览中输入cefsharp-->查找 CefSharp.Wpf-->点击安装,等待安装完成 3.如果遇到一下问题将解决方案和项目都改成64位 ...
- 通过View.post()获取View的宽高
在Android里,获取View宽高的时机是个老生常谈的话题了.众所周知,在Oncreate里直接调用View.getWidth或者View.getMeasuredWidth返回都是0.所以获取宽高时 ...
- nginx 平滑更新
1.更新nginx源 #centos6的nginx源 #centos7的话吧url 的6改为7就行了 vim /etc/yum.repos.d/nginx.repo [nginx] name=ngin ...