依赖注入、递归组件的用法

处理边界情况

  1. $root 用来访问根组件
  2. $parent 用来从一个子组件访问父组件的实例
  3. ref$refs 的用法

    在组件上面使用 ref 这个属性绑定,属性值自取,然后就可以通过 $refs.属性名 这种方式去获取到指定组件的实例了。

    其实不仅仅是组件能够使用 ref ,标签元素也能使用。

  4. 依赖注入

    现在我们有一个需求,如果我们存在多个组件嵌套的,然后现在其中某一个组件想访问其曾祖父组件的方法,那么使用上面两种方式都是不可取的,这个时候官方提供了 provideinject 这两个属性来解决这个问题。

    • provide 允许我们指定想要提供给后代组件的数据/方法,且该属性是一个方法,返回一个对象,键名就是我们要传到后代组件的标志
    • 然后在任何后代组件里,我们都可以使用 inject 选项来接收指定的我们想要添加在这个实例上的属性。该属性是一个数组类型,跟 props 的数组语法类似

    说到这里,有的人可能会觉得这不就是跟 props 差不多嘛。没错,它确实差不多,但是还是有区别的,比如,祖先元素不需要知道哪些后代组件使用它提供的属性;其次,后代组件也不需要知道被注入的属性来自哪里

    代码如下:

    父组件:

    <div id="app">
      <child-com></child-com>
    </div>
    
    <template id="childCom">
      <div>
        <span>我是子组件</span>
        <grand-com></grand-com>
      </div>
    </template>
    
    <template id="grandCom">
      <div>
        <span>我是孙子组件</span>
        <button @click='btnClick'>孙子组件按钮</button>
        <h2>{{mess}}</h2>
      </div>
    </template>
    
    <script>
      const vm = new Vue({
        el: '#app',      //  父组件
        methods: {
          sendMessage() {
            return '我发送了信息'
          }
        },
        provide() {  //  注意这里的 provide属性
          return {
            sendMess: this.sendMessage()  //  提供给后代了一个方法
          }
        },
        components: {
          childCom: {
            template: '#childCom',   //  子组件
            components: {
              grandCom: {
                template: '#grandCom',   //  孙子组件
                inject: ['sendMess'],    //  注意这里的 inject属性
                data() {
                  return {
                    mess: ''
                  }
                },
                methods: {
                  btnClick() {
                    this.mess = this.sendMess //  孙子组件用了这个方法
                  }
                },
              }
            }
          }
        }
      })
    </script>

    效果图:

  5. 递归组件

    听到递归组件,顾名思义就是采用的递归算法啦。但是组件如何才能递归呢?一般什么地方才会用到组件递归呢?

    首先我来回答第二个问题:想必你浏览过那么多的网页,总会发现网页中的那些测边栏导航栏啥的,这些存在一级二级三级层次关系的,就可以用递归。

    那么现在我再回答第二个问题,组件怎么使用递归呢?其实很简单,关键步骤就在于组件的 name 属性了。有很多都不知道为什么组件中在 export defalut 的对象中为啥会有个 name 属性,其实 name 属性在这里就发挥了很大的作用,下面看代码:

    <div id="app">
      <child-com :list='list'></child-com>
    </div>
    
    <template id="childCom">
      <div>
        <div v-for="(item, index) in list" :key="index">
          <div class="title">
            <span>{{item.title}}</span>
          </div>
          <!-- 下面就是组件递归调用了 -->
          <div v-if="item.children" class="child">
            <child-com :list='item.children'></child-com> <!--如果下面name改名了这里就根据name的名字来书写-->
          </div>
        </div>
      </div>
    </template>
    
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          list: [
            {
              title: '一级标题',
              children: [
                {
                  title: '二级标题',
                  children: [
                    {
                      title: '三级标题'
                    },
                    {
                      title: '三级标题'
                    }
                  ]
                },
                {
                  title: '二级标题'
                },
                {
                  title: '二级标题'
                }
              ]
            },
            {
              title: '一级标题'
            },
            {
              title: '一级标题'
            }
          ]
        },
        components: {
          childCom: {    //  下面这里为子组件了
            template: '#childCom',
            props: ['list'],
            name: 'ChildCom' //  注意这里子组件的name,你也可以改成其他的名字
          }
        }
      })
    </script>

    CSS样式:

    <style>
      .title {
        width: 150px;
        height: 30px;
      }
      .child {
        width: 140px;
        margin-left: 30px;
      }
    </style>

    效果图:

    有的人会问为什么要加个 v-if ,其实很简单,在我们写1+100的算法时候,我们如果用递归的方式做的话是不是就一定要有最终结束的条件,也就是数字必须大于等于0,小于0就不递归了。这里也是同样的道理,当继续往子组件传递list进去是,我们要先判断他还有没有children,如果没有了我们就应该让他停止。

  6. 通过v-on创建低开销的静态组件

    如果你想渲染的一个组件是一个完全静态的,如果使用vue的话会频繁的创建销毁,这个时候你会觉得这很影响性能,因为他只是个静态组件,完全没有这个必要,这个时候你可以在其模板的根元素上(不是template元素)添加一个 v-once 属性,这样一来,该组件就会只计算一次结果然后缓存起来,之后使用的都是之前缓存的结果。同时,因为他是只计算一次的,所以你如果再对其上的数据进行修改的话,数据将不会是响应式的。

    再说一次,试着不要过度使用这个模式。当你需要渲染大量静态内容时,极少数的情况下它会给你带来便利,除非你非常留意渲染变慢了,不然它完全是没有必要的——再加上它在后期会带来很多困惑。例如,设想另一个开发者并不熟悉 v-once 或漏看了它在模板中,他们可能会花很多个小时去找出模板为什么无法正确更新。

原文地址:https://www.cnblogs.com/liuyilong/p/12219164.html

时间: 2024-09-29 12:49:56

依赖注入、递归组件的用法的相关文章

再说php依赖注入

前段时间,有朋友问我yii2的依赖注入是怎么个玩法,好吧, 经常看到却一直不甚理解的概念,这里我再对自己认识的依赖注入深刻的表达下我的理解,依赖注入(DI)以及控制器反转(Ioc). 依赖注入就是组件通过构造器,方法或者属性字段来获取相应的依赖对象. 举个现实生活中的例子来理解, 比如我要一把菜刀 如何获得1.可以自己造一把,对应new一个.2.可以找生产菜刀的工厂去买一把,对应工厂模式.3.可以打电话 让店家送货上门,对应依赖注入 依赖注入(DI)的概念虽然听起来很深奥,但是如果你用过一些新兴

深度理解依赖注入(Dependence Injection)

前面的话:提到依赖注入,大家都会想到老马那篇经典的文章.其实,本文就是相当于对那篇文章的解读.所以,如果您对原文已经有了非常深刻的理解,完全不需要再看此文:但是,如果您和笔者一样,以前曾经看过,似乎看懂了,但似乎又没抓到什么要领,不妨看看笔者这个解读,也许对您理解原文有一定帮助. 1.依赖在哪里    老马举了一个小例子,是开发一个电影列举器(MovieList),这个电影列举器需要使用一个电影查找器(MovieFinder)提供的服务,伪码如下: 1/**//*服务的接口*/  2public

深度理解依赖注入

1.依赖在哪里   老马举了一个小例子,是开发一个电影列举器(MovieList),这个电影列举器需要使用一个电影查找器(MovieFinder)提供的服务,伪码如下: 1/*服务的接口*/ 2public interface MovieFinder { 3    ArrayList findAll(); 4} 5 6/*服务的消费者*/ 7class MovieLister 8{ 9    public Movie[] moviesDirectedBy(String arg) {10     

php中的数种依赖注入

经常看到却一直不甚理解的概念,依赖注入(DI)以及控制器反转(Ioc),找了几篇好的文章,分享一下. 自己理解的,依赖注入就是组件通过构造器,方法或者属性字段来获取相应的依赖对象. 举个现实生活中的例子来理解, 比如我要一把菜刀 如何获得1.可以自己造一把,对应new一个.2.可以找生产菜刀的工厂去买一把,对应工厂模式.3.可以打电话 让店家送货上门,对应依赖注入. 再比如我是一个演员,我不可能要求某个导演,我要演某某剧的男一号,相反,导演可以决定让谁来演.而我们的object就是这个演员. 注

yii2 随笔(七)依赖注入——(3)yii2的依赖注入

原文地址:p=124" target="_blank">http://ivhong.com/? p=124(ivhong.com 是我的博客主址) yii2的依赖注入的核心代码在 yii\di.在这个包(目录)以下有3个文件.各自是Container.php(容器),Instance.php(实例),ServiceLocator(服务定位器),如今我们讨论一下前两个.服务定位器能够理解一个服务的注冊表.这个不影响我们讨论依赖注入,它也是依赖注入的一种应用. 我们还是从代

IoC(控制反转) DI(依赖注入)

Ioc-Inversion of Control,即"控制反转",不是什么技术,而是一种设计思想.在Java开发中,Ioc意味着将你设计好的对象交给容器控制,而不是传统的在你的对象内部直接控制.如何理解好Ioc呢?理解好Ioc的关键是要明确"谁控制谁,控制什么,为何是反转(有反转就应该有正转了),哪些方面反转了",那我们来深入分析一下: ●谁控制谁,控制什么:传统Java SE程序设计,我们直接在对象内部通过new进行创建对象,是程序主动去创建依赖对象:而IoC是有

依赖注入和控制反转的理解,写的太好了。

学习过spring框架的人一定都会听过Spring的IoC(控制反转) .DI(依赖注入)这两个概念,对于初学Spring的人来说,总觉得IoC .DI这两个概念是模糊不清的,是很难理解的,今天和大家分享网上的一些技术大牛们对Spring框架的IOC的理解以及谈谈我对Spring Ioc的理解. 一.分享Iteye的开涛对Ioc的精彩讲解 首先要分享的是Iteye的开涛这位技术牛人对Spring框架的IOC的理解,写得非常通俗易懂,以下内容全部来自原文,原文地址:http://jinniansh

依赖注入(DI)和控制反转(IOC)

学习过Spring框架的人一定都会听过Spring的IoC(控制反转) .DI(依赖注入)这两个概念,对于初学Spring的人来说,总觉得IoC .DI这两个概念是模糊不清的,是很难理解的,今天和大家分享网上的一些技术大牛们对Spring框架的IOC的理解以及谈谈我对Spring Ioc的理解. 一.分享Iteye的开涛对Ioc的精彩讲解 首先要分享的是Iteye的开涛这位技术牛人对Spring框架的IOC的理解,写得非常通俗易懂,以下内容全部来自原文,原文地址:http://jinniansh

那些总是会问到的面试题:Spring依赖注入和控制反转的理解

IoC是什么Ioc-Inversion of Control,即"控制反转",不是什么技术,而是一种设计思想.在Java开发中,Ioc意味着将你设计好的对象交给容器控制,而不是传统的在你的对象内部直接控制.如何理解好Ioc呢?理解好Ioc的关键是要明确"谁控制谁,控制什么,为何是反转(有反转就应该有正转了),哪些方面反转了",那我们来深入分析一下: 谁控制谁,控制什么:传统Java SE程序设计,我们直接在对象内部通过new进行创建对象,是程序主动去创建依赖对象:而