不得不说的Prop

首先，Prop 是你可以在组件上注册的一些自定义 attribute，
当一个值传递给一个 prop attribute-->成为该实例的一个 property
一个组件可以拥有任意数量的Prop用来接收任何值，形如

Vue.component('blog-post', {
  props: ['title'],              //   ！！！接受数组的形式
  template: '<h3>{{ title }}</h3>'
})

一个 prop 被注册之后，就可以接收传递

<blog-post title="My journey with Vue">   </blog-post>

使用中注意-->每个组件必须只有一个根元素

Vue.component('blog-post', {
  props: ['post'],
  template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <div v-html="post.content"></div>
    </div>
  `
})
搭配上
<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:post="post"
></blog-post>

Prop参考链接-1

这时post作为一个对象，使用其property变得轻松愉快
不论何时为 post 对象添加一个新的 property，它都会自动地在 < blog-post > 内可用。

这里还有Prop

首先

<input v-model="something">

等于

<input v-bind:value="something"  v-on:input="something = $event.target.value">
//简写：<input :value="something"  @input="something = $event.target.value">

组件中声明了一个叫做value的props，并且通过触发input事件传入一个值，就能修改这个value 完整例子

//父组件中引用

    {{AAAAAAA}}, <组件名字 v-model="AAAAAA"></组件名字> 
    
                                       //3. {{AAAAAAA}}-->输入的值

//子组件

Vue.component('组件名字', {

  template: `<div>
                {{CCCC}}              //3. {{CCCC}} -->输入的值
                <button @click="方法名字">按钮</button>      //1.用户点击触发
             </div>`,
             
  props: ['CCCC'],  //接收一个 value prop
  
  methods: {
    方法名字() {
      this.$emit('input', '输入的值');   //2. 处理了
    }
  }
});

组件被引用（组件可以接受页面的输入）-->当btn被click，触发了事件监听（并且获取了'输入的值'）
组件本身获取了值，应用了该组件的依赖项随之更新
{{AAAAAAA}}只是形参，对应的上即可

Prop参考链接-2

真的是.sync了

Vue 2.3.0+ 新增
原因：真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源

Vue推荐以 update:myPropName 的模式触发事件取而代之

当组件定义了trigger方法

this.$emit('update:title', newTitle)

那么父组件
<text-document

  v-bind:title="doc.title"
  
  v-on:update:title="doc.title = $event"  ></text-document>
  
   //   --> v-on监听的就是 'update:title'

为了方便-->.sync修饰符号

<text-document v-bind:title.sync="doc.title"></text-document>

！注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用！

(例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的) ！

如果绑的是对象，对象中的每个property都作为一个独立 prop传进去然后各自添加用于更新的 v-on 监听器。

还有个例子
<Child :money.sync="dataApp"/>
<Child :money="dataApp" v-on:update:money="dataApp = $event"/>
//完全等价

Vue中2.0的prop 和.sync 修饰符

不得不说的Prop

这里还有Prop

真的是.sync了