vue component basics

Components Basics

---

一、复用性

component 只是多了个名字可复用的 vm instance 罢了

component 的很多属性都可以复用，除了 el 这样的 root-specific

---

二、特殊的地方

1. data 必须是 function

   这样可以实现 data 复用，让每一个引用都有一个独立的 data 值

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

---

 

三、component

可以分为 local 和 global 两种

global

Vue component() --- 注册

new Vue() --- 使用

---

四、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>

 

---

五、A Single Root Element

template 只能有一个 root element

既无论要写多少 html 代码，都只能放在一个 root element 下面

不然就只显示第一个 element

---

六、$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>  // ?