外部访问 Vue 中的 methods方法及其属性

根据你未实现的功能,选择合适的例子。外部访问Vue的 methods 如下:


例如1:直接onclick调用 vue 的methods方法
<template>
    <button onclick = "tapClick()">点我试试</button>
</template>
<script>
    export default{
        methods:{
            alert(){
                alert(1111111111111)
            },
        },
        mounted(){//vue生命周期。载入后执行

            window.tapClick = ()=>{
                this.alert();
                /*
                * 这里的this,指向的是Vue实例,并不是window,
                * 因为webpack将其vue 的 this 转换成了_this.alert(),相当于_that或者_self
                */
            }


        }
    }
</script>


例如2:使用 vue 提供的 ref 属性
<template>
    <button ref ="tapClick" >点我试试</button>
</template>
<script>
    export default{
        methods:{
            alert(){
                alert(1111111111111)
            },
        },
        mounted(){//vue生命周期。载入后执行

            this.$refs.tapClick.onclick = ()=>{
                console.log(this.alert())
            }


        }
    }
</script>


例如3:直接使用vm
var vm = new Vue({
    el: '#app',
    data: {
        medd: 2,
        index: 1
    },
    methods: {
        add: function() {
            return vm.medd + vm.index
        }
    }
})

如上面Vue的使用的话,可以使用 vm.add() 进行访问,vm 就是当前vue实例的对象。


例如4:
"use strict";
const vm = new Vue({
    store,
    router,
    render: h => h(App)
}).$mount("#apps");

如果是通过这种方式的话,访问子组件的 methods 话,就不能简单的按照上面的方式去访问了,访问也找不到。很无奈。如果你跟我一样的话==我有两种方法推荐:(目前没有找到更好的)==

方法1:深层次寻找。

拿到 vm 实例 你可以在 vm.$children下去寻找,也可以在 vnode 中去寻找节点:
VNode可以理解为vue框架的虚拟dom的基类,简单来说就是vue的虚拟dom,这里有 vnode 的介绍点我查看 -> vnode介绍

PS:组件嵌套越多寻找的层次越深!

效果图如下:

vm效果图

附:Vue实例部分属性介绍:

vm.$data - Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象属性的访问。

vm.$props - 当前组件接收到的 props 对象。Vue 实例代理了对其 props
对象属性的访问。

vm.$el - Vue 实例使用的根 DOM 元素。

vm.$options - 用于当前 Vue 实例的初始化选项。需要在选项中包含自定义属性时会有用处:

vm.$parent - 父实例,如果当前实例有的话。

vm.$root - 当前组件树的根 Vue 实例。如果当前实例没有父实例,此实例将会是其自己。

vm. children children 并不保证顺序,也不是响应式的。如果你发现自己正在尝试使用 $children 来进行数据绑定,考虑使用一个数组配合 v-for 来生成子组件,并且使用 Array 作为真正的来源。

方法2:简单暴力。

直接在Vue mounted()中定义 window.变量or方法名()的方法,对外抛出,这样webpack 打包的时候,不会因为是局部文件而找不到方法了。

例如:

export default {
    data() {
        return {

        }
    },
    components: {},
    created() {},
    methods: {
        pageButtonTap() {

        },
    },
    mounted() {
        window.onresize = () => {
            document.style.width = document.documentElement.clientWidth + "px";
            document.style.height = document.documentElement.clientHeight + 15 + "px";
        }
    }
}
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页