input 动态设置默认值 vue_Vue组件传值与通信集合

Vue的组件化给前端开发带来极大的便利，这种依赖数据来控制Dom的模式，区别于以前的开发控制Dom的开发理念，这也导致了一种情况，在Vue中是单向数据流的，意味着只能从父组件向子组件传值，不允许子组件向父组件传值。

这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。 ---vue教程

然而当我们把组件拆分到足够细的时候，子组件控制父组件的数据，或者兄弟组件之间的传值就变得尤为突出，这里我将总结各式各样的传值，函数调用的方法。

父组件中的通信方法

阅读完官方文档后，我们一定会对props有强烈的印象，然而在父组件中可不止有这种通信的方式。

---

props

• 命名规范
  HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：

<blog-post post-title="hello!"></blog-post>
Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{
    { postTitle }}</h3>'
})

• 传递静态或动态 Prop 假如你想传字符串给子组件只需要给便签添加属性就可以了

//这里的title的内容就会传给子组件
<blog-post title="My journey with Vue"></blog-post>

当然那些非字符串的类型就直接依赖于v-bind进行传值（Number、Boolean、Array...）

<!-- 动态赋予一个变量的值 -->
<blog-post v-bind:title="post.title"></blog-post>

<!-- 动态赋予一个复杂表达式的值 -->
<blog-post
  v-bind:title="post.title + ' by ' + post.author.name"
></blog-post>

• 子组件接收
  常见的就是声明式接收： props: [...] 数组形式

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  props: ['title', 'count', 'isPublished', 'commentIds', 'author'],
  data: function () {
    return {
      counts: this.count //this指向即可获取props值
    }
  },
  template: ''
})

但官方更推荐对象形式的接收，至少为每个prop指定类型

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取