vue组件之间传值父组件获取子组件的方法
Posted hellowoeld
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue组件之间传值父组件获取子组件的方法相关的知识,希望对你有一定的参考价值。
1、子组件向父组件传值
子组件
<template> <div class="app"> <input @click="sendMsg" type="button" value="给父组件传递值"> </div> </template> <script> export default { data () { return { msg: "我是子组件的msg", } }, methods:{ sendMsg(){ //func: 是父组件指定的传数据绑定的函数,this.msg:子组件给父组件传递的数据 this.$emit(‘func‘,this.msg) } } } </script>
子组件通过this.$emit()的方式将值传递给父组件
注意:这里的func是父组件中绑定的函数名
父组件:
<template> <div class="app"> <child @func="getMsgFormSon"></child> </div> </template> <script> import child from ‘./child.vue‘ export default { data () { return { msgFormSon: "this is msg" } }, components:{ child, }, methods:{ getMsgFormSon(data){ this.msgFormSon = data console.log(this.msgFormSon) } } } </script>
2、父组件向子组件传值
父组件
<template> <div class="app"> <child :date="msg"></child> </div> </template> <script> import child from ‘./child.vue‘ //子组件 export default { data () { return { msg: "this is msg" } }, components:{ child, 添加到父组件的components中 } } </script>
子组件
<template> <div class="app"> <li >{{date}}</li> </div> </template> <script> export default { props:[‘date‘], data () { return { } } }
原文链接:https://blog.csdn.net/weixin_38888773/java/article/details/81901831
3、父组件获得子组件的方法
父窗体
<template> <div class="gl-wrap" id="box"> <swiperTemp1 ref="temp1"></swiperTemp1> </div> </template> <script type="text/javascript"> import swiperTemp1 from ‘./swiper1.vue‘ export default { name: ‘index‘, data () { return {} }, methods: { }, mounted(){ this.$refs.temp1.test(123) }, components: {//模板 swiperTemp1 } } </script>
子组件
<template> </template> <script> export default{ data () { return { } }, methods: { test(n){ alert(n) } }, mounted(){ } } </script>
以上是关于vue组件之间传值父组件获取子组件的方法的主要内容,如果未能解决你的问题,请参考以下文章