小小的分享,加一下经验,大神请无视。
directive 也是组件,里面的scope
用来传递数据绑定关系,实质其实就是用来进行父子组件之间的通讯。一样的Vue的component也是同样的,也是用来组件的,里面的通信方式用了另外一个名词 props:
实质都是同样的,这里我贴代码你们看一下哦,
Angular directivehtml
jsvue
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
jsapp
Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) var app7 = new Vue({ el: '#app-7', data: { groceryList: [ { text: '蔬菜' }, { text: '奶酪' }, { text: '随便其余什么人吃的东西' } ] } })
htmldom
<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结构以及他背后的通信所带来的数据了rest