component值require

最新推荐文章于 2024-05-18 21:57:13 发布

youhebuke225

最新推荐文章于 2024-05-18 21:57:13 发布

阅读量579

点赞数

分类专栏： angularJS 文章标签： angular.js javascript 前端

本文链接：https://blog.csdn.net/youhebuke225/article/details/122570543

版权

angularJS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

作用

与directive不同，component的require跟的是一个配置对象

引用父级组件的控制器，可以拿到父级组件的属性与方法与方法
使用的时候，我们一般在钩子函数$onInit中创建一个变量来进行保存引用的控制器

例子

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.6.8/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="myCtrl">
      <h1>{{indexName}}</h1>
      <!-- 自定义组件 -->
      <component-one>
        <component-two></component-two>
      </component-one>
    </div>

    <script>
      var app = angular.module("myApp", []);
      app.controller("myCtrl", function ($scope) {
        $scope.indexName = "主页";
        $scope.childName = "我是传到组件中的信息";
      });
      app.component("componentOne",{
        controller:function(){
          this.name = "component-one"
          this.sayHello = function(){
            console.log("Hello");
          }
        }
      })
      app.component("componentTwo",{
        template:`
            <div>
                <h3>自定义组件</h3>
            </div>
        `,
        require:{
          one:"?^componentOne"
        },
        controller:function(){
          this.$onInit = function(){
            console.log(this.one.name);
            this.one.sayHello();
          }
        }
      });

    </script>
  </body>
</html>

效果

在这里插入图片描述

关于?^的说明，可以相见directive的require说明，链接，与directive的require不同的是取

require会将引入的controller传入link函数的第四个参数，如果加上了问号就会为null，不加就会报错
directive的require是当我们使用的时候，如果没有当前的controller，加上了？，我们取到的值为null，没加？就会报错，如以下例子

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.6.8/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="myCtrl">
      <h1>{{indexName}}</h1>
      <!-- 自定义组件 -->
      <component-one>
        <component-two></component-two>
      </component-one>
    </div>

    <script>
      var app = angular.module("myApp", []);
      app.controller("myCtrl", function ($scope) {
        $scope.indexName = "主页";
        $scope.childName = "我是传到组件中的信息";
      });
      app.component("componentOne",{
        controller:function(){
          this.name = "component-one"
          this.sayHello = function(){
            console.log("Hello");
          }
        }
      })
      app.component("componentTwo",{
        template:`
            <div>
                <h3>自定义组件</h3>
            </div>
        `,
        require:{
          one:"?^componentOne",
          three:"^componentThree"
        },
        controller:function(){
          this.$onInit = function(){
            console.log(this.one.name);
            this.one.sayHello();
            console.log(this.three);
          }
        }
      });

    </script>
  </body>
</html>

如果是从自身父级开始找，那么我们可以直接简写为

{
	require:{
		componentOne:"^^"
	}
}

例子

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.6.8/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="myCtrl">
      <h1>{{indexName}}</h1>
      <!-- 自定义组件 -->
      <component-one>
        <component-two></component-two>
      </component-one>
    </div>

    <script>
      var app = angular.module("myApp", []);
      app.controller("myCtrl", function ($scope) {
        $scope.indexName = "主页";
        $scope.childName = "我是传到组件中的信息";
      });
      app.component("componentOne",{
        controller:function(){
          this.name = "component-one"
          this.sayHello = function(){
            console.log("Hello");
          }
        }
      })
      app.component("componentTwo",{
        template:`
            <div>
                <h3>自定义组件</h3>
            </div>
        `,
        require:{
          componentOne:"^"
        },
        controller:function(){
          this.$onInit = function(){
            console.log(this.componentOne.name);
            this.componentOne.sayHello();
          }
        }
      });

    </script>
  </body>
</html>

youhebuke225

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
component值require

作用与directive不同，component的require跟的是一个配置对象引用父级组件的控制器，可以拿到父级组件的属性与方法与方法使用的时候，我们一般在钩子函数$onInit中创建一个变量来进行保存引用的控制器例子<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <script src="https://cdn.bootcdn.net/ajax/l
复制链接

扫一扫