这篇文章主要为大家详细介绍了vue单页开发父子组件传值思路分析,具有一定的参考价值,可以用来参考一下。
感兴趣的小伙伴,下面一起跟随四海网的小编两巴掌来看看吧!
vue单页开发时经常需要父子组件之间传值,自己用过但是不是很熟练,这里我抽空整理了一下思路,写写自己的总结。
GitHub地址:https://github.com/leileibrother/wechat-vue
文件目录如下图,example.vue是父组件,exampleChild.vue是子组件。
【图片暂缺】
父组件引入子组件,父组件html的代码如下:
代码如下:
<template>
<div>
<h3>这是父组件</h3>
<p style="margin: 20px 0;text-align: center;">
<span>子组件传过来的值是 “{{childValue}}”</span>
</p>
<example-child v-bind:message="parentMsg" @getChildValue="getValue"></example-child>
</div>
</template>
<script>
import exampleChild from './examplechild.vue';
export default {
name: "example.vue",
components: {
exampleChild
},
data(){
return {
parentMsg:'hello',
childValue:''
}
},
mounted(){
},
methods: {
getValue:function (val) {
this.childValue = val;
}
}
}
</script>
<style scoped>
</style>
子组件代码如下:
代码如下:
<template>
<div>
<p style="margin: 20px 0;text-align: center;">我是子组件,父组件穿传过来的值是{{message}}</p>
<p style="margin: 20px 0;text-align: center;">
<button @click="send">点击向父组件传值</button>
</p>
</div>
</template>
<script>
export default {
name: "exampleChild.vue",
props:['message'],
data(){
return {
}
},
mounted(){
},
methods: {
send:function () {
this.$emit('getChildValue','你好父组件!')
}
}
}
</script>
<style scoped>
</style>
在父组件中使用v-bind来绑定数据传给子组件,如我写的v-bind:message="parentMsg",把message字段传给子组件,
【图片暂缺】
在子组件中使用props接收值,如props:['message']
,接收父组件传过来的message字段,使用{{message}}
就是可以使用父组件传过来的值了。
【图片暂缺】
子向父传值需要一个“中转站”,如我写的getChildValue,命名随便写。
在子组件中使用$emit()
来向父组件传值。第一个参数就是这个“中转站”,后面的参数是要传的值,可以是多个。
【图片暂缺】
在父组件中如下,也需要这个中转站来接收值
【图片暂缺】
getValue是接收子组件值的函数,参数val就是子组件传过来的值,这样就可以接收到子组件传过来的值了。
【图片暂缺】
以上所述是小编给大家介绍的vue单页开发父子组件传值思路详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对四海网网站的支持!
本文来自:http://www.q1010.com/184/5518-0.html
注:关于vue单页开发父子组件传值思路分析的内容就先介绍到这里,更多相关文章的可以留意四海网的其他信息。
关键词:vue.js
四海网收集整理一些常用的php代码,JS代码,数据库mysql等技术文章。