Vue父组件和子组件之间数据传递和方法调用
作者:yin 发布时间:2023-07-02 17:01:57
标签:Vue,父组件,子组件
vue组件在通信中,无论是子组件向父组件传值还是父组件向子组件传值,他们都有一个共同点就是有中间介质,子向父的介质是自定义事件,父向子的介质是props中的属性。
父组件向子组件传值(子组件主动获取父组件的数据和方法)
父组件import引用子组件
使用子组件时在子组件上添加一个v-bind属性,并绑定上数据
在子组件中创建 props ,在props 中创建相同的属性名,用来接收数据
把接收到的数据在子组件中使用
子组件向父组件传值(父组件主动获取子组件的数据和方法)
子组件中需要发出该自定义事件,可以是按钮的点击事件,也可以是其他方式
将需要传的值放在 $emit 第二个参数的位置,这个参数会被传给父组件中的响应方法
需要在父组件中使用子组件并在子组件标签上绑定对事件的监听
演示代码:
//父组件
<template>
<div id="header">
<headerchild ref="headerChild"></headerchild>
<button @click="getChild()">父组件获取子组件的数据和方法</button>
</div>
</template>
<script>
import HeaderChild from './HeaderChild'
export default {
data () {
return {
title:'我是父组件的数据'
}
},
methods: {
getChild (){
console.log(this.$refs.headerChild.name)
},
run (){
console.log("我是父组件里面的方法")
}
},
components: {
'headerchild': HeaderChild
}
}
</script>
<style lang="sass" scoped>
</style>
//子组件
<template>
<div id="headerchild">
<button @click="getParent()">获取父组件的数据和方法</button>
</div>
</template>
<script>
export default {
data () {
return {
name:'我是子组件里面的数据'
}
},
methods:{
getParent(){
console.log(this.$parent.title) /*获取整个父组件*/
this.$parent.run()/*获取父组件的方法*/
}
},
props:['title','run','home'] /*通过props接收父组件传递过来的数据 */
}
</script>
0
投稿
猜你喜欢
- 问题现象元素的属性中没有id、name;虽然有class,但比较大众化,且位置也不固定;例如:页码中的下一页;那该如何找到该元素?<a
- 寻觅工具确定任务之后第一步就是找个趁手的库来干活。 Python Excel上列出了xlrd、xlwt、xlutils这几个包,但是它们都比
- 项目地址:https://github.com/ray-project/ray1、简介Ray为构建分布式应用程序提供了一个简单、通用的API
- 下面附上参考文章,这篇文章是通过识别出来的文字来打开浏览器中的默认网站。python通过调用百度api实现语音识别题目很简单,利用语音识别识
- selenuim模块定位方法1,我们想要操作html页面上的元素,首先必须要定位到这个元素上。每个元素都有他各自的属性,比如id,name,
- 缘由新手学习 Django 当配置好 HTML 页面后,就需要使用一些静态资源,如图片,JS 文件,CSS 样式等,但是 Django 里面
- 序对于如何将py文件打包生成exe可执行文件最简单的应该我觉得就是使用pyinstaller第三方模块下面我就分为三个步骤给大家讲解如何使用
- 如下所示:# -*- coding: utf-8 -*-import os import pandas as pdimport numpy
- 本文研究的主要是python删除过期log文件的相关内容,具体介绍如下。1. 用Python遍历目录os.walk方法可以很方便的得到目录下
- 我就废话不多说了,大家还是直接看代码吧!'''Created on 2018-4-4'''k
- 数据备份与还原第三篇,具体如下基础概念:备份,将当前已有的数据或记录另存一份;还原,将数据恢复到备份时的状态。为什么要进行数据的备份与还原?
- 复数是由一个实数和一个虚数组合构成,表示为:x+yj一个复数时一对有序浮点数(x,y),其中x是实数部分,y是虚数部分。Python语言中有
- MySQL 日期类型:日期格式、所占存储空间、日期范围 比较。 日期类型 &nbs
- 正在看的ORACLE教程是:常见数据库系统比较 Oracle数据库。提起数据库,第一个想到的公司,一般都会是Oracle。该公司
- 发现问题一个作业报错,报错信息如下,从错误信息根本看不出为什么出错,手工运行作业又成功了。一时不清楚什么原因导致作业出错。MessageEx
- sqlalchemy 对于行级锁有两种实现方式,with_lockmode(self, mode): 和 with_for_update(s
- PDO::getAvailableDriversPDO::getAvailableDrivers — 返回一个可用驱动的数组(PHP 5 &
- 字符串遍历>>> a_str = "hello itcast">>> for cha
- 前面已经提到,CSS之所以如此强大,是因为它采用HTML文档结构来决定其样式的应用。但这仅仅只是一方面,因为它只暗示了CSS之所以使用文档结
- 前言 好长时间没摸数据库了,周末在家写了个报表的存储过程,一时间对使用存储过程实