Vue:propを介してサブコンポーネントにデータを渡し、サブコンポーネントイベントを傍受する

Propは、コンポーネントに登録できるカスタムプロパティです.値がpropプロパティに渡されると、そのコンポーネントインスタンスのプロパティになります.ブログコンポーネントにタイトルを渡すには、propsオプションを使用して、コンポーネントが許容できるpropリストに含めることができます.

Vue.component('blog-post', {
  props: ['title'],
  template: '
{{ title }}
'
})

1つのコンポーネントはデフォルトで任意の数のpropを持つことができ、任意の値は任意のpropに渡すことができます.上記のテンプレートでは、dataの値にアクセスするように、コンポーネントインスタンスでこの値にアクセスできることがわかります.
Propが登録されると、このようにデータをカスタムプロパティとして渡すことができます.

しかし、典型的なアプリケーションでは、dataにブログの配列がある可能性があります.

new Vue({
  el: '#blog-post-demo',
  data: {
    posts: [
      { id: 1, title: 'My journey with Vue' },
      { id: 2, title: 'Blogging with Vue' },
      { id: 3, title: 'Why Vue is so fun' }
    ]
  }
})

各ブログのコンポーネントをレンダリングするには、次の手順に従います.

上記のように、v-bindを使用してpropを動的に伝達できることがわかります.
このコンポーネントを再構築し、単独のpost propを受け入れるようにします.

Vue.component('blog-post', {
  props: ['post'],
  template: `
    

      
{{ post.title }}
      

    
  `
})

监听子组件事件：

在我们开发  组件时，它的一些功能可能要求我们和父级组件进行沟通。例如我们可能会引入一个可访问性的功能来放大博文的字号，同时让页面的其它部分保持默认的字号。

在其父组件中，我们可以通过添加一个 postFontSize 数据属性来支持这个功能：

new Vue({
  el: '#blog-posts-events-demo',
  data: {
    posts: [/* ... */],
    postFontSize: 1
  }
})

テンプレートでは、すべてのブログの番号を制御できます.

各ブログの本文の前にボタンを追加して、番号を拡大します.

Vue.component('blog-post', {
  props: ['post'],
  template: `
    

      
{{ post.title }}
      
        Enlarge text
      
      

    
  `
})

当点击这个按钮时，我们需要告诉父级组件放大所有博文的文本。我们使用v-on 监听子组件实例的任意事件：

同時に、サブコンポーネントは、組み込まれた$emitメソッドを呼び出し、イベント名を入力することによって、イベントをトリガーすることができる.

  Enlarge text

 
完全なサンプルコード:

import Vue from 'vue'
/* eslint-disable no-new */
Vue.component('blog-post', { //    Prop         
  props: ['post'],
  template: //    
    `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <button v-on:click="$emit('enlarge-text')">
        Enlarge text
      </button>
    </div>
    `
})

export default {
  name: 'HelloWorld',
  data () {
    return {
      posts: [
        { id: 1, title: 'My journey with Vue' },
        { id: 2, title: 'Blogging with Vue' },
        { id: 3, title: 'Why Vue is so fun' }
      ],
      postFontSize: 1,
    }
  }
}

以下を改造して、v-onでテキストを縮小する方法を追加します.

import Vue from 'vue'
/* eslint-disable no-new */
Vue.component('blog-post', { //    Prop         
  props: ['post'],
  template: //    
    `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <button v-on:click="$emit('enlarge-text', 0.1)">
              
      </button>
      <button v-on:click="$emit('smaller-text', 0.1)">
              
      </button>
    </div>
    `
})

export default {
  name: 'HelloWorld',
  data () {
    return {
      posts: [
        { id: 1, title: 'My journey with Vue' },
        { id: 2, title: 'Blogging with Vue' },
        { id: 3, title: 'Why Vue is so fun' }
      ],
      postFontSize: 1,
      msg: 'Welcome to Your Vue.js App'
    }
  }
}

参考文献:基礎を築く——Vue.js
https://cn.vuejs.org/v2/guide/components.html