1、在父组件中引入子组件
import Son from './Son'
2、在父组件中使用v-bind绑定数据到子组件
<son v-bind:msg="msg"></son>
3、在子组件中使用props接收
props: {
msg: { // 属性名来自父组件的数据源的key
type: String, // 当前msg所属的类型
default: '' // 如果取不到的默认值
},
},
1、在子组件中创建点击事件
<button @click="sendToParent"></button>
2、子组件数据的准备
data() {
return {
str: '子组件传值到父组件:0420'
}
},
methods: {
sendToParent() {
this.$emit('show',this.str)
}
},
3、父组件接收
<son v-bind:msg="msg" @show="getData"></son>
4、父组件中定义方法进行接收
data() {
return {
msg: '来自父组件的值:123456',
abc:''
}
},
methods: {
getData(val) { // 这里的val是取出的子组件str值
this.abc=val // 将val值赋给abc 并取值显示
}
},
1、Parent.vue
<template>
<div>
<h3>我是父组件</h3>
<!-- 使用组件 并使用v-bind绑定传值 -->
<son v-bind:msg="msg" @show="getData"></son>
<hr>
{{abc}}
</div>
</template>
<script>
// 父组件向子组件传值
// 1、在父组件中引入子组件
// 2、注册子组件 vcompon
// 3、使用组件 并使用v-bind绑定传值
import Son from './Son'
export default {
components: {
Son,
},
data() {
return {
msg: '来自父组件的值:123456',
abc:''
}
},
methods: {
getData(val) { // 这里的val是取出的子组件str值
this.abc=val // 将val值赋给abc 并取值显示
}
},
};
</script>
<style lang="scss" scoped>
</style>
2、Son.vue
<template>
<div>
<h3>我是子组件</h3>
{{msg}}
<br>
<button @click="sendToParent">点击显示</button>
</div>
</template>
<script>
// 接收父组件的传值
export default {
props: {
msg: { // 属性名来自父组件的数据源的key
type: String, // 当前msg所属的类型
default: '' // 如果取不到的默认值
},
},
data() {
return {
str: '子组件传值到父组件0420'
}
},
methods: {
sendToParent() {
this.$emit('show',this.str)
}
},
};
</script>
<style lang="scss" scoped>
</style>
IT之家3月12日消息 谷歌最近推出了 Chrome 浏览器 89 版本,对浏览器的配置文件...
python合成Excel表多sheet 使用xlrd模块和xlwt模块 解题思想xlwt模块是非追加写....
文章大纲 引言 一、repo 概述 1、repo的工作原理概述 2、repo 库的主要结构**rep...
java中导出Excel有两个组件可以使用,一个是jxl,一个是POI,我这里用的是POI。...
前言:本博客只是因为我正在上计算机图形学这门课,为了方便复习所写,所以内容...
一、作用域 作用域是什么 几乎所有的编程语言都有一个基本功能,就是能够存储变...
尽管Windows Subsystem for Linux(WSL)是与windows10一起运行Linux发行版的一种...
前情回顾不断复习 HTML第一篇 HTML第二篇 HTML第三篇 HTML第四篇 HTML第五篇 表...
对于医疗机构而言,数据管理需要投入金钱和精力。该领域的供应商已经落后于其他...
文章目录 格式 其中需注意 一个特别“教科书”版的例子来自菜鸟教程最下方版权信...