没有合适的资源?快使用搜索试试~ 我知道了~
vue单页开发时经常需要父子组件之间传值,自己用过但是不是很熟练,这里我抽空整理了一下思路,写写自己的总结。 GitHub地址:https://github.com/leileibrother/wechat-vue 文件目录如下图,example.vue是父组件,exampleChild.vue是子组件。 父组件引入子组件,父组件html的代码如下: <template> <div> <h3>这是父组件</h3> <p xss=removed> <span>子组件传过来的值是 “{{childValue}}”</
资源详情
资源评论
资源推荐
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 {
weixin_38670318
- 粉丝: 6
- 资源: 920
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0