Angular directive&&Vue component-白红宇

Angular directive&&Vue component

阅读量：6457 次

发布时间：2019-06-23

本文共 1128 字，大约阅读时间需要 3 分钟。

小小的分享，加一下经验，大神请无视。

directive 也是组件，里面的scope用来传递数据绑定关系，实质其实就是用来进行父子组件之间的通信。同样的Vue的component也是一样的，也是用来组件的，里面的通讯方式用了另一个名词 props:实质都是一样的，这里我贴代码大家看一下哦，

Angular directive

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

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

html

v-bind:todo="item"这里绑定了通讯这里的组件是注册在全局中，vue根作用域作为他的挂载点，这样就相当于他这个组件变得是最开放的公共组件，谁都可以调用这个组件，同样的这个也是浏览器识别不了这个标签，于是就遍历整个vue的这个组件空间，看看谁的名字对就执行谁然后呢我们就看到了这dom结构以及他背后的通讯所带来的数据了

转载地址：http://ptizo.baihongyu.com/

你可能感兴趣的文章