VUE组件学习（依赖注入）

最新推荐文章于 2022-09-08 22:47:15 发布

qq_14897069

最新推荐文章于 2022-09-08 22:47:15 发布

阅读量1.5k

点赞数 1

分类专栏： VUE 文章标签： VUE

本文链接：https://blog.csdn.net/qq_14897069/article/details/88211564

版权

VUE 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

访问VUE根实例

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

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

注意

在绝大多数情况下，触达父级组件会使得你的应用更难调试和理解，尤其是当你变更了父级组件的数据的时候。

比如：

这个 <google-map> 组件可以定义一个 map 属性

在这种情况下 <google-map-markers> 可能想要通过类似 this.$parent.getMap 的方式访问那个地图？

需要在 <google-map-markers> 内部你可能发现自己需要一些类似这样的 hack：

var map = this.$parent.map || this.$parent.$parent.map

总结：用 this.$parent来传递实例，阅读性极差，找不到是哪个父类的实例。容易出现问题

<google-map>
  <google-map-region v-bind:shape="cityBoundaries">
    <google-map-markers v-bind:places="iceCreamShops"></google-map-markers>
  </google-map-region>
</google-map>

Vue.component('my-button',{
        methods:{
          myclick:function () {
              this.$root.message=this.$root.message+1;//反问根组件的实例
              this.$parent.message=this.$root.message+1; //访问父组件的实例
            console.log(this.$root.message)

          }
        },
        template:
        `
            <button  v-on:click="myclick">获取父类的元素</button>
        `

    })

访问子组件实例或方法

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

<base-input ref="usernameInput"></base-input>

注意

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

实例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.6.6/vue.min.js"></script>

</head>
<body>
<div id="app">
    {{message}}
    <my-button ref="mybutton"></my-button>
    <button @click="getMybutton">调用子组件方法</button>
</div>

<script>

    Vue.component('my-button',{
        methods:{
          myclick:function () {
              this.$root.message=this.$root.message+1;//反问根组件的实例
              this.$parent.message=this.$root.message+1; //访问父组件的实例
            console.log(this.$root.message)

          }
        },
        data:function()
        {
            return{
                title:"我是子组件!"
            }
        },
        template:
        `
            <button  v-on:click="myclick">获取父类的元素</button>
        `

    })
    var app = new Vue(
        {
            el: "#app",
            data: function () {
                return {
                    message: 22
                }
            },methods: {
                getMybutton:function ()
                {
                    console.log(this.$refs.mybutton.title);
                    this.$refs.mybutton.myclick();
                }
            }
        }
    )
    // 访问根实例
    console.log(app.$root.message)
    console.log(app.message)
</script>
</body>
</html>

依赖注入

弥补了 this.$parent 获取父类实例方法的不足，

实际上，你可以把依赖注入看作一部分“大范围有效的 prop”，除了：

祖先组件不需要知道哪些后代组件使用它提供的属性
后代组件不需要知道被注入的属性来自哪里

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.6.6/vue.min.js"></script>
</head>
<body>
    <div id="app">
        {{message}}
        <google-map>
        </google-map>

    </div>
<script>

    Vue.component("google-map",{
        methods:{
          getMap: function ()
          {
            console.log("获取地图资源!")
          }
        },
        provide: function () {
            return {
                getMap: this.getMap
            }
        },template: `
            <div>
                 <google-map-region></google-map-region>
            </div>
        `
    })
    Vue.component("google-map-region",{
        inject:["getMap"],//与provide raturn  返回的方法key一致
        methods:{
            rightMap: function ()
            {
                console.log("渲染Map!调用父类方法,依赖注入");
               this.getMap();
            }
        },
        template:`

               <div>
                  <button @click="rightMap">获取父类方法</button>
                  <google-map-markers title="你好"></google-map-markers>
                </div>

        `
    })
    Vue.component("google-map-markers",{
        inheritAttrs:false,
        props:{"title":String},
       inject:["getMap"],
        methods:{
           markerMap:function () {
               console.log("获取 父类的父类方法 getMap");
               this.getMap()
           }
        },
        template:`
              <button v-bind="$attrs" @click="markerMap">{{title}}</button>

        `
    })


    var app=new Vue({
        el:"#app",
        data:function () {
            return{
                message:"手放开"
            }
        }
    })
</script>
</body>
</html>