基于Vue中的父子传值问题解决
更新时间：2020年07月27日 11:04:34 作者：WebCandy
这篇文章主要介绍了基于Vue中的父子传值问题解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
主题是Vue中几种常见的传值方法。。。先写个父子传值吧
vue-cli构建项目目录，噜啦啦，这个就不用说了吧。
接着创建父子组件，父组件Father.vue，子组件Son.vue(随意起名，开心就好)，然后在父组件中引入子组件，创建一个父组件的路由。车门已经焊死了，请继续往下看
1.父传子
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>
效果图：
补充知识：在vue中的for循环，我经常用这两种方法
1、
for(let item of response.data.result) {
用item操作每一条数据。
}
item：定义的每一条的变量
response.data.result：要循环的数组
2、
response.data.result.forEach((item, index) => {
用item操作每一条数据。
}）
response.data.result：要循环的数组
index：索引
以上这篇基于Vue中的父子传值问题解决就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Element el-button 按钮组件的使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
本文主要介绍了vue+element实现手机号验证码注册的示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
这篇文章主要介绍了浅谈关于iview表单验证的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
Vue是一款流行的JavaScript框架，它提供了数据响应式更新的能力，可以让我们轻松地更新数据，并自动更新视图，本文将介绍Vue中如何进行数据响应式更新，包括使用Vue的响应式系统、使用计算属性和使用Vue的watcher,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了浅谈vue生命周期共有几个阶段？分别是什么？具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要为大家详细介绍了Vue3编写气泡对话框组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
国际化就是指在一个项目中，项目中的语言可以进行切换（中英文切换），那么在实际项目中是如何实现的呢，本文就给大家详细的介绍实现方法,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了Vue3数据更新,页面没有同步更新的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
本篇文章主要介绍了vue + socket.io实现一个简易聊天室示例代码，具有一定的参考价值，有兴趣的可以了解一下。2017-03-03
这篇文章主要介绍了Vue之绑定class样式与style样式方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-09-09
最新评论