Angular directive&&Vue component

2024年4月12日 203次阅读 来源: miaomiaogege

小小的分享，加一下履历，大神请疏忽。
directive 也是组件，内里的scope用来通报数据绑定关联，本质实在就是用来举行父子组件之间的通信。一样的Vue的component也是一样的，也是用来组件的，内里的通信体式格局用了另一个名词 props:本质都是一样的，这里我贴代码人人看一下哦，
Angular directive

js

 angular.module('angularapp')
 .directive('dateSelect', function() {
return {
                restrict: 'E',
                templateUrl: 'date-select.html',
                scope: {
                    times: '=',
                    query: '&'
                },

html

 date-select(times='time',query='query()')

这里我们看到了 直接用自定义标签 在其属性上面 举行数据通报，起首html全部作用域属于angularapp，所以通报时从本作用域到一个小的组件里去，自定义标签浏览器不辨认，Angular 就会查询自身的directive这个预计是个数组情势的一个空间看看哪一个dierective的名字跟这个婚配 然后实行directive就如许，我们的自定义标签被辨认出来了，然后把内容注入到这个标签内里。

Vue
js

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { text: '蔬菜' },
      { text: '奶酪' },
      { text: '随意其他什么人吃的东西' }
    ]
  }
})

html

<div id="app-7">
  <ol>
    <!-- 如今我们为每一个todo-item供应待办项对象    -->
    <!-- 待办项对象是变量，即其内容可所以动态的 -->
    <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
  </ol>
</div>

v-bind:todo="item"这里绑定了通信 这里的组件是注册在全局中，vue根作用域作为他的挂载点，如许就相当于他这个组件变得是最开放的大众组件，谁都能够挪用这个组件，一样的这个也是 浏览器辨认不了这个标签，于是就遍历全部vue的这个组件空间，看看谁的名字对 就实行谁 然后呢 我们就看到了这dom构造以及他背地的通信所带来的数据了

    原文作者：miaomiaogege
    原文地址: https://segmentfault.com/a/1190000009300941
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞