vue访问元素&组件

qujian 发布于2019-08-23 16:10 / 2874人阅读

摘要：访问子组件实例或子元素尽管存在和事件，有的时候你仍可能需要在里直接访问一个子组件。注意只会在组件渲染完成之后生效，并且它们不是响应式的。

访问根实例

在每个new Vue实例的子组件中，其根实例可以通过$root属性进行访问。
例子：

// Vue 根实例
new Vue({
  data: {
    foo: 1
  },
  computed: {
    bar: function () { /* ... */ }
  },
  methods: {
    baz: function () { /* ... */ }
  }
})

所有的子组件都可以将这个实例作为一个全局store来访问或使用。

/ 获取根组件的数据
this.$root.foo

// 写入根组件的数据
this.$root.foo = 2

// 访问根组件的计算属性
this.$root.bar

// 调用根组件的方法
this.$root.baz()

注意：
对于demo或非常小型的有少量组件的应用来说这是很方便的。不过这个模式扩展到中大型应用来说就不合适了。因此在绝大多数情况下，我们强烈推荐使用Vuex来管理应用的状态。

访问父组件实例

和$root类似，$parent属性可以用来从一个子组件访问父组件的实例。它提供了一种机会，可以在后期随时触达父级组件，以替代将数据以prop的方式传入子组件的方式。
注意：

在绝大多数情况下，触达父级组件会使得你的应用更难调试和理解，尤其是当你变更了父级组件的数据的时候。当我们稍后回看那个组件的时候，很难找出那个变更是从哪里发起的。

## 访问子组件实例或子元素 ##
尽管存在prop和事件，有的时候你仍可能需要在Javascript里直接访问一个子组件。为了达到这个目的，你可以通过ref特性为这个子组件赋予一个ID引用。例如：

现在在你已经定义了这个ref的组件里，你可以使用：

this.$refs.usernameInput

来访问这个实例，以便不时之需。
当 ref 和 v-for 一起使用的时候，你得到的引用将会是一个包含了对应数据源的这些子组件的数组。
注意：

$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。

依赖注入

在这个组件里，所有的后代都需要访问一个getMap方法，以便知道要跟哪个地图进行交互。不幸的是，使用$parent属性无法很好的扩展到更深层级的嵌套组件上。这也是依赖注入的用武之地，它用到了两个新的实例属性：provide和inject。
provide选项允许我们指定我们想要提供给后代组件的数据/方法。在这个例子中，就是内部的getMap方法：

provide(){
    return{
        getMap:this.getMap
    }
}

然后在任何后代组件里，我们都可以通过使用inject选项来接收指定的我们想要添加在这个实例上的属性：

inject:["getMap"]

相比$parent来说，这个用法可以让我们在任意后代组件中访问getMap，而不需要暴露整个实例。这允许我们更好的持续研发该组件，而不需要担心我们可能会改变/移除一些子组件依赖的东西。同时这些组件之间的接口是始终明确定义的，就和props一样。
祖先组件不需要知道哪些后代组件使用它提供的属性
后代组件不需要知道被注入的属性来自哪里
注意：

然而，依赖注入还是有负面影响的。它将你的应用以目前的组件组织方式耦合了起来，使重构变得更加困难。同时所提供的属性是非响应式的。这是出于设计的考虑，因为使用它们来创建一个中心化规模化的数据跟使用 $root做这件事都是不够好的。如果你想要共享的这个属性是你的应用特有的，而不是通用化的，或者如果你想在祖先组件中更新所提供的数据，那么这意味着你可能需要换用一个像 Vuex 这样真正的状态管理方案了。

GPU云服务器云服务器 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102765.html

详解Vue3 Composition API优雅封装第三方组件

　　我们时常会想在保持第三方组件原有功能（属性props、事件events、插槽slots、方法methods）的基础上，这些功能如何优化的实现？　　以Element Plus的el-input为例：　　在封装一个MyInput组件，把要使用的属性props、事件events和插槽slots、方法methods先要依照自己的需求来编写：　　//MyInput.vue 　　<template&...

3403771864 2022-10-30 10:34 评论0 收藏0
在前端框架中封装Vue第三方组件的三个小技巧

　　这篇就是带大家一起学习下在封装第三方组件中，通过封装的组件去使用第三方组件的Attributes(属性)、Events(自定义事件)、Methods(方法)、Slots(插槽)以及优化技巧。　　一、使用第三方组件的属性　　封装一个elementUI的el-input输入框组件称为myInput，若要在myInput组件上添加一个disabled属性来禁用输入框，这样的情况要怎么做？　　//my...

3403771864 2022-10-30 10:14 评论0 收藏0
angular，react &amp; vue

摘要：由进行开发和维护，代发布于年月，现在主要是。状态是只读的，只能通过来改变，以避免竞争条件这也有助于调试。文件大小为，而为，为。请记住，性能基准只能作为考虑的附注，而不是作为判断标准。使用的人员报告说，他们永远不必阅读库的源代码。本文当时写在本地，发现换电脑很不是方便，在这里记录下。 angular，react & vue 2018/07/23 2016年，对于JavaScript来说...

jiekechoo 2019-08-23 18:02 评论0 收藏0
Vue.js进入/离开&amp;列表过度动画。

摘要：包括以下工具在过渡和动画中自动应用可以配合第三方动画库，如在过渡钩子函数中使用直接操作可以配合使用第三方动画库，如在这里，我们只会讲到进入离开和列表的过渡。不仅可以进入和离开动画，还可以改变定位。概述 Vue在插入、更新或则移除DOM时，提供多种不同方式的应用过渡效果。包括以下工具： *在CSS过渡和动画中自动应用class *可以配合第三方CSS动画库，如Animate.css *...

thekingisalwaysluc 2019-08-23 15:23 评论0 收藏0