Vue 中的父子组件沟通

1. 父子组件传值

Vue 中，父组件传值给子组件，是通过子组件上绑定的 props值。

子组件给父组件传值，并不是直接修改父组件的值，而是通过$emit 触发父组件上的事件，并将值传给父组件，由父组件自己更新对应的值。

下面的例子，父组件通过 :post 将 data 中的post 值传给子组件的porp: ‘post’ ,

子组件中 button 按钮，点击后通过 $emit 触发父组件的 enlarge-text 事件，同时 $emit 的第二个参数会传给父组件的 enlarge-text 事件。父组件通过 $event 获取子组件传来的值。

/* 父组件中使用的子组件 */

<div id="app">
    <blog-post :post="post" :style="{fontSize: postFontSize+ 'px'}"
        	   @enlarge-text = "postFontSize+= $event">
	</blog-post>
</div>	

// 定义子组件 blog-post

Vue.component('blog-post',{
        props: ['post'],
        template: `
            <div>
                <h3>{{post.title}}</h3>
                <button @click="$emit('enlarge-text', 1)">
                    Enlarge text
                </button>
                <div v-html="post.content"></div>
            </div>
        `,
    });

// 生成 Vue 实例

let app = new Vue({
        el: '#app',
        data(){
            return {
                post:{ id: 1, title: 'My journey with Vue', content: 'dgdsfhghfh'},                
                postFontSize : 15,               
            }
        }
    });

页面效果如下， 点击 Enalrge text 按钮，字体会变大：

2. 父子组件沟通的语法糖: v-bind修饰符 sync 和 v-model

• v-bind 修饰符 sync

  相当于是在父组件绑定了update:prop 事件，将 v-bind 绑定的值传给子组件，
  子组件通过$emit触发 update:prop 事件，将 prop 更新的值回给父组件

  /* 父组件中使用的子组件 */
  <div id="app">
      {{number}}
  	<add-num :num.sync="number"></add-num>
  </div>
  

  // 定义子组件
  
  Vue.component('add-num',{
      props:['num'],
      template: `
          <div>
              <button @click="addNum">Add</button>
          </div>
      `,
      data(){
          return {
              number: this.num
          }
      },
      methods:{
          addNum(){
              this.number++;
              this.$emit('update:num', this.number)
          }
      }
  });
  

  // 生成 Vue 实例
  
  let app = new Vue({
          el: '#app',
          data(){
              return {               
                  number:1               
              }
          }
      });
  

  页面效果：点击加号，数字加1
  

• v-model

  相当于在父组件上绑定了 input 事件，把value值传给子组件，子组件通过$emit触发input事件，并将该改变的value值回传给父组件，实现数据的双向绑定

  /* 父组件中使用的子组件 */
  <div id="app">
       搜索内容：{{searchText}}
       <custom-input v-model="searchText"></custom-input>
  </div>
  

  // 定义子组件
  Vue.component('custom-input',{
          props:['value'],
          template: `
              <input :value="value"
              @input="$emit('input', $event.target.value)"
              >
          `,
      });
  

  // 生成 Vue 实例
  
  let app = new Vue({
          el: '#app',
          data(){
              return {               
                  searchText:'新闻',               
              }
          }
      });
  

  页面效果： 在搜索框输入什么，前面就会显示什么