Angular directive&&Vue component

miaomiaogege發表於2017-05-05
AngularVue

小小的分享，加一下經驗，大神請無視。
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結構以及他背後的通訊所帶來的資料了

相關文章