外部访问 Vue 中的 methods方法及其属性
来源:互联网 发布:java中的多态如何理解 编辑:程序博客网 时间:2024/05/21 17:01
根据你未实现的功能,选择合适的例子。外部访问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:组件嵌套越多寻找的层次越深!
效果图如下:
附: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"; } }}
- 外部访问 Vue 中的 methods方法及其属性
- vue中如何在外部调用methods的方法
- vue 计算属性computed和观察watch 和方法methods
- php中类外部访问类私有属性的方法
- 从外部访问类中的私有方法的方法
- Vue计算属性(computed)、methods、watched三者区别
- vue计算属性computed和methods的区别
- vue中的侦听属性
- vue中methods一个方法调用另外一个方法
- vue-属性与方法
- Vue属性与方法
- 内部类访问外部类方法中的参数-使用final
- 匿名内部类访问外部类方法中的局部变量
- 在vue中methods互相调用的方法
- C#3.0 中的扩展方法 (Extension Methods)
- C#3.0 中的扩展方法 (Extension Methods)
- C#3.0 中的扩展方法 (Extension Methods)
- C#3.0 中的扩展方法 (Extension Methods)
- Java类的初始化块总结
- Android 6.0申请权限梳理(压制不住内心想当画家的心)
- spring使用aop时需要设置proxy-target-class="true" 否则无法依赖注入
- iOS window添加视频view或图片view,并有切换根视图控制器的时候注意
- list,set,map区别
- 外部访问 Vue 中的 methods方法及其属性
- 图的简单实现
- 区间第K大值
- 学习rabbitmq(1) AMQP
- 目前很多应用直接使用手机验证码登录?无登录密码?这样做有什么利弊?
- awk更新现有文件内容并输出到新文件中
- PTA 7-2 家谱处理——模拟
- Spark Streaming 'numRecords must not be negative'问题解决
- 利用Wifidog实现微信wifi连接以及自写认证服务器