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项目 ...
随机推荐
- Leetcode-35.搜索插入位置
题目描述: 给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引.如果目标值不存在于数组中,返回它将会被按顺序插入的位置. 你可以假设数组中无重复元素. 示例 1: 输入: [1,3,5,6 ...
- 从基本理解到深入探究 Linux kernel 通知链（notifier chain）【转】
转自:https://blog.csdn.net/u014134180/article/details/86563754 版权声明:本文为博主原创文章,未经博主允许不得转载.——Wu_Being ht ...
- 【easy】268. Missing Number
Given an array containing n distinct numbers taken from 0, 1, 2, ..., n, find the one that is missin ...
- LeetCode.接雨水
题外话:LeetCode上一个测试用例总是通不过(我在文章末贴出通不过的测试用例),给的原因是超出运行时间,我拿那个测试用例试了下2.037ms运行完.我自己强行给加了这句: && m ...
- 全面剖析XMLHttpRequest对象
XMLHttpRequest对象是当今所有AJAX和Web 2.0应用程序的技术基础.尽管软件经销商和开源社团现在都在提供各种AJAX框架以进一步简化XMLHttpRequest对象的使用:但是,我们 ...
- TableView+Button
local MainScene = class("MainScene", cc.load("mvc").ViewBase) function MainScene ...
- 四 Memcache
官网http://memcached.org 了解 cookies和session 安装memcached # yum install memcached -y 安装nc和telnet 来管理mem ...
- CentOS Linux Jenkins安装、部署、更新
1.安装:https://wiki.jenkins.io/display/JENKINS/Installing+Jenkins+on+Red+Hat+distributions2.部署: 注意事项: ...
- swoole框架基本总结
框架-Swoole扩展-Swoole文档中心 http://wiki.swoole.com/wiki/page/p-framework.html swoole有两个部分. 一个是PHP扩展,用C开发的 ...
- Jmeter（1）介绍
JMeter是什么东西 Jmeter(Apache JMeter)是一个100%基于JAVA的应用程序,它的功能是 分析和衡量 web应用程序和各种服务的性能和负载能力 Jmeter不是一个浏览器,它 ...