• 售前

  • 售后

热门帖子
入门百科

vue父子组件的相互传值和调用

[复制链接]
永远丶并不远 显示全部楼层 发表于 2021-10-26 13:50:21 |阅读模式 打印 上一主题 下一主题
目次


  • 1、父传值给子组件
  • 2、子传值给父组件
  • 3、子调用父组件中的方法
  • 4、父调用子组件中的方法

1、父传值给子组件


父组件:
  1. <template>
  2.   <div>
  3.     <p class="father">父组件</p>
  4.     <child :sid="id"></child>
  5.   </div>
  6. </template>
  7. <script>
  8. import child from './child'
  9. export default {
  10.   components: {
  11.     child
  12.   },
  13.   data() {
  14.     return {
  15.       id:'1234' // 父组件向子组件传的值
  16.     }
  17.   }
  18. }
  19. </script>
复制代码
子组件:
  1. <template>
  2.   <div>
  3.     <p class="child">子组件</p>
  4.     <p class="child">接收父组件的值是:{{ sid }}</p>
  5.   </div>
  6. </template>
  7. <script>
  8. export default {
  9.   props:{
  10.     sid:{
  11.       type:String,
  12.       default: '0'
  13.     }
  14.   },
  15.   // props:["sid"],
  16.   data() {
  17.    return {
  18.    }
  19.  }
  20. }
  21. </script>
复制代码
阐明:
①sid是在子组件中绑定要传的值,记住“=”前的sid要和子组件中要接受的变量名要同等
②在子组件中用props来接受传入的值,可以写成对象范例,规定范例和默认值,也可以直接写成字符串
③在子组件中可以直接使用,也可以在函数中使用this.sid举行访问

2、子传值给父组件


父组件:
  1. <template>
  2.   <div>
  3.     <p class="father">父组件</p>
  4.     <p class="father">接收到子组件的值:{{childSid}}</p>
  5.     <child @passVaule="parentPassValue"></child>
  6.   </div>
  7. </template>
  8. <script>
  9. import child from './child'
  10. export default {
  11.   components: {
  12.     child
  13.   },
  14.   data() {
  15.     return {
  16.       childSid:'' // 接收子组件的值
  17.     }
  18.   },
  19.   methods: {
  20.     parentPassValue(data) {
  21.       this.childSid = data;
  22.     }
  23.   }
  24. }
  25. </script>
复制代码
子组件:
  1. <template>
  2.   <div>
  3.     <p class="child">子组件</p>
  4.     <button @click="valueClick">传值</button>
  5.   </div>
  6. </template>
  7. <script>
  8. export default {
  9.   data() {
  10.     return {
  11.     }
  12.   },
  13.   methods: {
  14.     valueClick() {
  15.       this.$emit('passVaule',19)
  16.     }
  17.   }
  18. }
  19. </script>
复制代码
阐明:
①子组件中给一个方法去触发$emit,第一个参数是在父组件引入子组件绑定的函数名('passVaule'),第二个是要传的值(19)
②父组件中绑定一个函数,调用父组件中绑定的函数,在此中对值举行接收操纵

3、子调用父组件中的方法


父组件:
  1. <template>
  2.   <div>
  3.     <p class="father">父组件</p>
  4.     <child @funVaule="parentFunValue"></child>
  5.   </div>
  6. </template>
  7. <script>
  8. import child from './child'
  9. export default {
  10.   components: {
  11.     child
  12.   },
  13.   data() {
  14.     return {
  15.     }
  16.   },
  17.   methods: {
  18.     parentFunValue() {
  19.       console.log('调用了父组件中的函数');
  20.     }
  21.   }
  22. }
  23. </script>
复制代码
子组件:
  1. <template>
  2.   <div>
  3.     <p class="child">子组件</p>
  4.     <button @click="funClick">调用父组件方法</button>
  5.   </div>
  6. </template>
  7. <script>
  8. export default {
  9.   data() {
  10.     return {
  11.     }
  12.   },
  13.   methods: {
  14.     funClick() {
  15.       this.$emit('funVaule')
  16.     }
  17.   }
  18. }
  19. </script>
复制代码
阐明:
①这个和子传值给父雷同,只是不传值,调用了父组件的绑定的函数

4、父调用子组件中的方法


父组件:
  1. <template>
  2.   <div>
  3.     <p class="father">父组件</p>
  4.     <button @click="childClick">调用子组件方法</button>
  5.     <child ref="mychild"></child>
  6.   </div>
  7. </template>
  8. <script>
  9. import child from './child'
  10. export default {
  11.   components: {
  12.     child
  13.   },
  14.   data() {
  15.     return {
  16.     }
  17.   },
  18.   methods: {
  19.     childClick() {
  20.       this.$refs.mychild.testNum(1)
  21.     }
  22.   }
  23. }
  24. </script>
复制代码
子组件:
  1. <template>
  2.   <div>
  3.     <p class="child">子组件</p>
  4. </button>
  5.   </div>
  6. </template>
  7. <script>
  8. export default {
  9.   data() {
  10.     return {
  11.     }
  12.   },
  13.   methods: {
  14.     testNum(data) {
  15.       console.log('调用了子组件中的方法:', data);
  16.     }
  17.   }
  18. }
  19. </script>
复制代码
阐明:
① 父组件中在引入的子组件中写入 ref = "mychild"   mychid为自己定义的实例名
② 在函数中写 this.refs.mychild.testNum(), “testNum”为子组件中定义的函数名
③子组件定义一个函数,让父组件调用即可
④这个方法也可以举行传值,在括号中传入值,子组件接收即可
以上就是vue父子组件的互相传值和调用的详细内容,更多关于vue父子组件的传值和调用的资料请关注草根技术分享其它相关文章!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作