组件调用
组件在调用时,可以使用data,computed,methods等属性,但是data不是以往的对象,而是一个函数,因为是函数所有组件在重复使用的过程中才不会互相影响,并且可以通过props属性向子组件传值。需要注意的是,父组件向子组件传递的数据是数组或者对象时,传递的是数据的引用,此时子组件修改数据会影响到父组件。
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
其中props传值可以通过子组件调用时进行传递,其中的title就是通过props传递给子组件
<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>
组件通信
前面说了可以父组件可以在调用子组件时通过props进行传值;同时子组件可以使用emit方法的第一个参数类似钥匙一样,让父组件进行对接,第二个参数可以传递其他的值,父组件可以通过$event进行获取。如果父组件中对应的是一个函数方法,则子组件抛出的第二个参数作为父组件对应函数方法的参数
<button v-on:click="$emit('enlarge-text', 0.1)">
Enlarge text
</button>
//然后当在父级组件监听这个事件的时候,我们可以通过 $event 访问到被抛出的这个值:
<blog-post
...
v-on:enlarge-text="postFontSize += $event"
></blog-post>