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