vue 组件之间传值（父传子，子传父）
2024-09-08 11:09:07
1.父传子
基本就用一个方式，props
Father.vue(用v-bind(简写 : ) 将父组件传的值绑定到子组件上)
<template>
<div>
我是爸爸：{{message}}
<hr>
<Son :toSonData="toSonData"></Son>
</div>
</template> <script>
import Son from "./Son.vue";
export default {
data() {
return {
message : "儿子你好",
toSonData: "苹果" //给子组件的值
};
}, components: {
Son
}
};
</script>
<style lang='scss' scoped>
</style>
Son.vue（在子组件中用props方法接收父组件传来的值，两种方法，具体用哪种看
个人喜好，推荐第二种）
<template>
<div>
我是儿子：{{message}}
<br>
爸爸给我的礼物：{{toSonData}}
</div>
</template> <script>
export default {
// props:["toSonData"],//第一种方式
props:{//第二种方式
toSonData:{
type:String,
default:function(){
return ""
}
}
},
data () {
return {
message : "爸爸你好"
};
},
}
</script>
<style lang='scss' scoped>
</style>
2.子传父
Son.vue(在子组件中创建一个按钮，定义一个点击事件，点击事件里用this.$emit方法触发一个
自定义事件，并传递一个参数)
<template>
<div>
我是儿子：{{message}}
<br>
爸爸给我的礼物：{{toSonData}}
<br>
<button @click="toFatherData">给爸爸传值</button>
</div>
</template> <script>
export default {
// props:["toSonData"],//第一种方式
props:{//第二种方式
toSonData:{
type:String,
default:function(){
return ""
}
}
},
data () {
return {
message : "爸爸你好"
};
},
methods:{
toFatherData(){
this.$emit("toFatherData","给爸爸的爱")
}
}
} </script>
<style lang='scss' scoped> </style>
Father.vue(在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法，
将接收到的值赋给data中的sendSonMessage)
<template>
<div>
我是爸爸：{{message}}
<br>
儿子传来的值:{{sendSonMessage}}
<hr>
<Son :toSonData="toSonData" @toFatherData="sendSonData"></Son>
</div>
</template> <script>
import Son from "./Son.vue";
export default {
data() {
return {
message : "儿子你好",
toSonData: "苹果", //给子组件的值
sendSonMessage: ""
};
}, components: {
Son
},
methods:{
sendSonData(data){
this.sendSonMessage=data;
}
}
};
</script>
<style lang='scss' scoped>
</style>
最新文章
- 2016.10.14,英语,《American Accent Training》
- Spring的入门的程序
- JSP 和 ASP.NET 谁能主宰未来【转】
- iOS 两个App之间调起通信
- oracle数据库中varchar2陷阱
- ASP.NET十分有用的页面间传值方法
- view.performClick()触发点击事件
- 【BZOJ】1821: [JSOI2010]Group 部落划分 Group（最小生成树+贪心）
- Python学习笔记-Day3-set集合操作
- Vue.js—实现图书管理系统
- ViewPager +无限轮播+滑动速度修改+指示小点
- Linux中给普通用户添加sudo权限
- Perl爬虫的简单实现
- Python3编写网络爬虫11-数据存储方式四-关系型数据库存储
- fswatch rsync配置使用 rsync 传输大量细小文件
- Maven支撑下的War应用依赖另外一个WAR应用的解决方案
- [Java in NetBeans] Lesson 07. JavaDoc and Unit Tests
- numpy 学习笔记
- android--------自定义控件 之 基本流程篇
- 在VMware安装Centos7