vue组件学习1

112 阅读1分钟

组件调用

组件在调用时,可以使用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向父组件传递信息,父组件通过v-on来接收,通过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>