vue component basics
一、复用性
component 只是多了个名字可复用的 vm instance 罢了
component 的很多属性都可以复用,除了 el 这样的 root-specific
二、特殊的地方
-
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> // ?