在父组件通过this.$ref查看子组件内容

最新推荐文章于 2024-04-20 15:15:11 发布

weixin_48419976

最新推荐文章于 2024-04-20 15:15:11 发布

阅读量261

点赞数

文章标签： vue.js Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_48419976/article/details/129104951

版权

Vue的refAPI允许父组件访问并操作子组件的属性和方法。在子组件中定义了一个名为moduleInnerFun的函数和一个foo数据，然后在父组件中通过ref=myrefff引用子组件，并在mounted生命周期钩子中调用了子组件的函数和数据。

摘要由CSDN通过智能技术生成

ref是vue的一个能调用子组件内部函数或者数据的api

子组件的定义

定义的组件 <a>
    new Vue({
     data: {
     foo: 1
     },
     methods: {
             moduleInnerFun(){
            window.alert('我是子组件的函数哦，只是被父组件这个页面调用了')
        }
     }
})

使用子组件

    <a
        ref="myrefff"    
    >
    </a>
<!-- 要使组件内部方法，就在使用它的时候写明ref 是什么 再在mounted页面使用 -->

<script>
    import  a from '/src/views/material/MaterialView'
    export default {
        components:{
            a
        },mounted(){
//数据
            console.log(this.$refs.a.foo);
            // ref属性应该在mounted时用
//函数
            this.$refs.MaterialListView.moduleInnerFun()
        }