vue component basics

Components Basics

---

1、複用性

component 只是多了個名字可複用的 vm instance 罷了

component 的不少屬性均可以複用，除了 el 這樣的 root-specific

---

2、特殊的地方

1. data 必須是 function

   這樣能夠實現 data 複用，讓每個引用都有一個獨立的 data 值

   data: function () { return { age: 20 } }

---

 

3、component

能夠分爲 local 和 global 兩種

global

Vue component() --- 註冊

new Vue() --- 使用

---

4、props -- passing data to child components

例子

<div id="componentId2">
  <my-component v-for="item in posts" :key="item.id" :title="item.title"></my-component>
</div>

// 注意是使用 bind 來實現數據的綁定

<script>
  Vue.component("my-component", {
    props: ['title'],
    template: '<div>{{ title }}</div>'
  })

  new Vue({
    el: '#componentId2',
    data: {
      posts: [
        {id: 1, title: 'kdljfklajldkfjadsl'},
        {id: 2, title: 'sdkafnm'},
        {id: 3, title: 'kjlk'}
      ]
    }
  })
</script>

 

---

5、A Single Root Element

template 只能有一個 root element

既不管要寫多少 html 代碼，都只能放在一個 root element 下面

否則就只顯示第一個 element

---

6、$emit

？不懂什麼鬼

。。。未完待續

2018-09-07

$emit : 發射方法到父組件，同時能夠傳遞值過去

傳遞的值經過 $event 獲取，至關於 $event 是 value 的 key

// vue
Vue.component('use-emit', {
    template: 
        '<div>' +
            '<button v-on:click="$emit(\'clickFun\', emit-value)">click</button>' +
        '<div>'
});

//html
<use-emit v-on:clickFun="someFun($event)"></use-emit>  // ?