青草幽幽

vue组件之间函数调用

电脑版发表于:2020/6/27 14:38

父组件调用子组件:

html:

<Child ref="myChild"></Child>

js:

// 父组件
// 引入子组件
import Child from './Child'
export default {
  // 注册子组件
  components: {Child},
  created () {
    // 调用子组件中的childMethod,需要给子组件添加属性ref
    this.$refs.myChild.childMethod("hello")
  },
  methods: {
      parentMethod (data) {
       console.log(data)
      }
  }
}

子组件:

// 子组件
export default {
    methods: {
        childMethod (data) {
            console.log(data)
        },
        parentMethod (data) {
            // 子组件调用父组件函数
            // 如何这样不行,可以考虑使用$emit、vuex等其他方法
            this.$parent.parentMethod(data)
        }
    }
}


子组件调用父组件:

父组件:

<template>
      <div class="wrapper">
            <VLink @parentMethod="macSelect"></VLink >
      </div>
</template>
<script>
import VLink from "../components/VLink.vue";  
export default{
    components:{
        VLink 
    },
    method:{
        macSelect(){
          alert("嘿嘿");
        }
    }
}
</script>

子组件:

<template>
    <div class="bet-action">
        <span class="mac-select" @click="childMethod">机选</span>
    </div>
</template>
<script>
    export default{
      methods: {
          childMethod() {
              console.log('请求父组件方法');
              this.$emit('parentMethod');  //使用$emit()引入父组件中的方法
          }
      },
    }
</script>



关于TNBLOG
TNBLOG,技术分享。技术交流:群号677373950
ICP备案 :渝ICP备18016597号-1
App store Android
精彩评论
{{item.replyName}}
{{item.content}}
{{item.time}}
{{subpj.replyName}}
@{{subpj.beReplyName}}{{subpj.content}}
{{subpj.time}}
猜你喜欢