精华内容
下载资源
问答
  • Vue组件跨层级获取组件实例

    千次阅读 2019-05-30 14:09:46
    this.$parent 访问父实例 this.$children 当前实例的直接子组件。(不保证顺序,不是响应式) this.$parent.$parent.$refs.xxx 跨级访问父组件 ...只能获取当前组件上下文组件 无法跨层级 ref 是字符串 被用来给...

    this.$parent 访问父实例
    this.$children 当前实例的直接子组件。(不保证顺序,不是响应式)
    this.$parent.$parent.$refs.xxx 跨级访问父组件
    this.$children.$children.$refs.xxx 跨级访问子组件
    这种递归的方式 代码繁琐 性能低效

    this.$parent打印结果

    ref

    只能获取当前组件上下文组件 无法跨层级

    ref 是字符串 被用来给元素或子组件注册引用信息。
    引用信息将会注册在父组件的 $refs 对象上。
    如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;
    如果用在子组件上,引用就指向组件实例

    <!-- vm.$refs.p/this.$refs.p 获取DOM node -->
    <p ref="p">hello</p>
    <!-- vm.$refs.child/this.$refs.child 获取组件实例 -->
    <child-component ref="child"></child-component>
    

    注:

    • 因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们,它们还不存在
    • $refs 不是响应式的,因此你不应该试图用它在模板中做数据绑定。
    • 这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。
    • 当 ref 和 v-for 一起使用的时候,你得到的引用将会是一个包含了对应数据源的这些子组件的数组。

    如何优雅的获取跨层级实例 ?

    1. npm install vue-ref || yarn add vue-ref 安装vue-ref插件
    2. 导入import ref from "vue-ref"
    3. 使用插件Vue.use(ref, { name: "ant-ref" });name是给插件起名

    插件使用方法

    //使用`provide` 在根组件提供数据 
    provide() {
      return {
        //主动通知 将组件实例绑定在根组件上
        setChildrenRef: (name, ref) => {
          this[name] = ref;
        },
        //主动获取 获取绑定的组件
        getChildrenRef: name => {
          return this[name];
        },
        // 获取根组件
        getRef: () => {
          return this;
        }
      }
    }
    // 使用`inject` 在子组件中注入数据
    inject: {
      setChildrenRef: {
        default: () => {}
      },
      getParentRef: {
        from: "getRef",
        default: () => {}
      },
      getParentChildrenRef: {
        from: "getChildrenRef",
        default: () => {}
      }
    }
    
    //使用指令注册子组件
    <ChildrenH v-ant-ref="c => setChildrenRef('childrenH', c)" />
    //使用指令注册DOM元素
    <h3 v-ant-ref="c => setChildrenRef('childrenE', c)">E 结点</h3>
    
    //获取根组件实例 
    this.getParentRef()
    //获取指定名称组件实例
    this.getParentChildrenRef("childrenH")
    //这里输出的事DOM
    this.getParentChildrenRef("childrenE")
    

    vue-ref插件源码

    "use strict";
    
    Object.defineProperty(exports, "__esModule", {
      value: true
    });
    exports.default = {
      install: function install(Vue) {
        var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
        var directiveName = options.name || 'ref';
        console.log(arguments)
        Vue.directive(directiveName, {
          bind: function bind(el, binding, vnode) {
            //自定义指令传入值 是函数, 在这里执行 传入组件实例
            binding.value(vnode.componentInstance || el, vnode.key); //vnode.key 是使用插件时起的名称
          },
          update: function update(el, binding, vnode, oldVnode) {
            if (oldVnode.data && oldVnode.data.directives) {
              var oldBinding = oldVnode.data.directives.find(function (directive) {
                var name = directive.name;
                return name === directiveName;
              });
              if (oldBinding && oldBinding.value !== binding.value) {
                oldBinding && oldBinding.value(null, oldVnode.key);
                // 如果指令绑定的值有变化,则更新 组件实例
                binding.value(vnode.componentInstance || el, vnode.key);
                return;
              }
            }
            // Should not have this situation
            if (vnode.componentInstance !== oldVnode.componentInstance || vnode.elm !== oldVnode.elm) {
              binding.value(vnode.componentInstance || el, vnode.key);
            }
          },
          unbind: function unbind(el, binding, vnode) {
            binding.value(null, vnode.key);
          }
        });
      }
    };
    
    展开全文
  • 大家都知道当使用时才装入需要的组件,可以有效的提高首次...比如在路由切换时,下面这篇文章主要给大家介绍了关于如何实现一个简单的Vue异步组件的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下。
  • Vue组件实例之$el

    千次阅读 2020-08-28 15:17:05
    获取Vue实例挂载的DOM元素,自mounted钩子函数开始生效,之前的钩子函数内无效。如下代码所示,Vue脚手架中,$el指向当前组件template模板中的根标签。 二、实例 <template> <div id="root"> <...

    目录

    一、概述

    二、实例


    一、概述

    获取Vue实例挂载的DOM元素,自mounted钩子函数开始生效,之前的钩子函数内无效。如下代码所示,Vue脚手架中,$el指向当前组件template模板中的根标签。

    二、实例

    <template>
      <div id="root">
        <h1 @click="fn()">
          Lorem, ipsum 
        </h1>
      </div>
    </template>
    <script>
    export default {
      methods: {
        fn() {
          console.log(this.$el); // <div id="root">...</div>
        }
      }
    };
    </script></
    展开全文
  • vue中js获取组件实例

    2018-02-28 17:14:00
    获取到的VM实例,外部js仍然能自由调用VM的一切属性和方法。 <template> </template> <script> // 声明变量currVM let currVM export default { data() { return {} }, created...

    获取到的VM实例,外部js仍然能自由调用VM的一切属性和方法。

    <template>
    </template>
    
    <script>
    // 声明变量currVM
    let currVM
    export default {
        data() {
            return {}
        },
        created() {
            // 在created()中将当前组件的VM实例赋给变量currVM
            currVM = this
        }
    }
    </script>

     

    转载于:https://www.cnblogs.com/sangzs/p/8484688.html

    展开全文
  • 一、概述 获取Vue的根组件实例

    目录

    一、$root

    二、$parent

    三、$children


    一、$root

    获取当前Vue组件的根组件实例。

    <template>
      <div>
        <h2>$root</h2>
      </div>
    </template>
    <script>
    export default {
      mounted() {
        console.log(this.$root.$el); // <div id="app"></div>
      }
    };
    </script>
    

    二、$parent

    获取当前Vue组件的父组件实例。

    展开全文
  • VUE 自定义组件怎么获取实例中的数据,详细点。。。。。。。。。。。。。。。
  • 下面小编就为大家带来一篇vue组件获取组件中的数据(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 问题:在被调用的js中使用组件实例的this,实现参数的传递。 最近公司需要修改项目的框架,统一用vue的框架,以前的代码需要移植到统一的框架中,我负责的模块以前是用backbone.js的框架写的,尝试过使用vue.watch...
  • Vue组件实例之$props

    千次阅读 2020-08-28 17:37:11
    二、实例 一、概述 $props属性包含了组件选项props接收的父作用域传递的属性。 二、实例 实例一:$props属性和$attrs属性互为补集 $props属性和$attrs属性互为补集,二者之和为父作用域中当前组件的所有绑定...
  • Vue获取组件name属性

    千次阅读 2018-09-21 09:31:22
    版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82796619 Vue获取组件name属性 Vu...
  • Vue组件实例之$refs

    2020-08-28 15:26:02
    $refs在组件渲染完成后才会生效。ref属性的作用有两个,其一给元素注册引用信息,其二给子组件注册引用信息。 二、详解 元素注册引用信息 如下代码所示,ref属性给元素注册引用信息,并用$refs对象获取引用信息...
  • Vue组件实例之$attrs

    2020-04-27 00:43:18
    一、概述 想象一下,你打算封装一个自定义的input组件my-input...此时子组件my-input中需要用props属性接收父组件传递的数据。 export default{ name: 'myInput', props: ['type', 'placeholder', 'title'] } ...
  • Vue组件实例之$options

    千次阅读 2020-08-30 21:05:12
    按钮 实例二:调用组件选项methods中的方法 按钮 实例三:调用钩子函数 按钮 实例五:获取组件实例 export default { methods: { btn() { // 打印父组件实例 console.log(this.$options.parent); // VueComponent...
  • getCurrentInstance方法只有在 development,即开发环境下才能获取到当前组件实例,换句话说就是这个方法只是在开发环境下用于调试使用的
  • Vue3里常规挂载方法/属性以及调用 在Vue3的开发过程中,难免会在全局挂载方法或者属性。 挂载: // main.ts import App from './App.vue' import _ from 'lodash' const app = Vue.createApp(App) app.config....
  • vue3:setup中如何获取组件实例

    千次阅读 2021-05-23 20:51:59
    可通过 getCurrentInstance 获取当前实例 若使用 Options API 可照常使用 this 代码说明 import { onMounted, getCurrentInstance } from 'vue' export default { data () { return { x: 1 } }, setup ()...
  • Vue组件实例

    千次阅读 2018-12-18 15:03:14
    Vue 动画效果过渡模式 相同标签名的元素切换 !isEditing"> {{isEditing ? 'save' : 'edit'}} new Vue({ el:'#demo', data:{ isEditing:true } }) 效果如下: 多个元素的过渡,可...
  • Vue 组件注册实例详解

    千次阅读 2019-04-02 20:32:51
    这篇文章主要介绍了Vue 组件注册,结合实例形式较为详细的分析了vue.js组件的常见分类、注册方法及相关操作注意事项,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎...
  • 下面的案例中,父组件引用了一个以element-ui中的NavMenu封装的子组件。 <!-- 父组件 --> <div> <childMenu ref="childMenu"></childMenu> </div> <!-- 子组件 --> <...
  • vue3 ts组件实例类型

    2021-07-16 17:07:11
    mark下获取组件实例并能不any指定类型正确调用组件的方法,非常好用! import导入组件后 使用InstanceType获取组件类型; 例如 import MoviesList from './components/list.vue'; 如果想使用这个组件的方法,正常不...
  • 主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue拖拽组件开发实例

    万次阅读 2018-05-10 10:13:31
    为什么选择Vue?主要原因:对于前端开发来说,兼容性是我们必须要考虑的问题之一。我们的项目不需要兼容低...为什么要封装成一个Vue组件?主要目的是可提高代码的复用性和可维护性。复用性:组件化后,一些样式和逻辑...
  • vue获取实例元素的三种方法

    千次阅读 2019-10-07 14:25:47
    vue在开发组件中,获取组件实例是一个非常有用的方法。组件可以通过 $refs、$parents、$children等方式获得实例引用 $refs在组件(或者dom上)增加ref属性即可 $parents获取子组件挂载的父组件节点 $children获取...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 41,525
精华内容 16,610
关键字:

vue获取组件实例

vue 订阅