脚本宝典收集整理的这篇文章主要介绍了Angular directive&&Vue component，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小小的分享，加一下经验，大神请无视。
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结构以及他背后的通讯所带来的数据了

脚本宝典总结

以上是脚本宝典为你收集整理的Angular directive&&Vue component全部内容，希望文章能够帮你解决Angular directive&&Vue component所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。