vue2

props

向子组件传递数据是经常会用到的，一般是在子组件定义 props 来接受数据，当父组件改变数据时子组件的数据也会进行更新。但这里是有一个坑的，先看代码：

<pagination :params="params"></pagination>

data: function() {
  return {
    params: {
      per_page: 3
    }
  }
},
created: function() {
  this.params.page = 1;
}

// child-component

<p> {{ params.per_page }} {{ params.page }} </p>// 3 1

props: {
   total: Number,
   params: Object
}

这里传递的是一个 object，在父组件中定义一个方法改变 params 的 per_page 和 page 的值，但子组件只有 params.per_page 的值更新了，page 的值是没有更新的。这是因为 vue 只会跟踪 data 函数里定义的变量，所以想要 page 也更新，在 data 的 params 里加上 page 属性就行了。

使用已经定义好的过滤器

// fileName: formatDate.js

import Vue from 'vue'

Vue.filter('formatDate', function(value) {
  return new Date(value).toLocaleString()
})

const formatDate = Vue.filter('formatDate')

export default formatDate

// component

<p>Posted at {{article.created_at | formatDate}}</p> 

import formatDate from '../filters/formatDate.js'