Vueコンポーネント化開発の知識点について詳しく説明します。

グローバルコンポーネント登録

Vue.component('first-component', {
 data: function () {
  return {
   count: 0
  }
 },
 template: '<button @click="count++">{{ count }}</button>'
})

dataは関数でなければなりません。
コンポーネントテンプレートの内容は必ず単一のルート要素でなければなりません。
コンポーネントテンプレートの内容はテンプレート文字列とすることができます。
グローバルコンポーネントはグローバルコンポーネントをネスティングできます。
コンポーネントの命名方法

Vue.component('first-component', {/* .... */})
//              ,    template       
Vue.component('firstComponent', {/* .... */})

ローカルコンポーネント登録
部分的に登録されたコンポーネントは親のコンポーネントだけで使用できます。

var vm = new Vue({
 components: {
  'hello-world': {
   data: function () {
    return {
     msg: 'hello world'
    }
   },
   template: '<div>{{ msg }}</div>'
  }
 }
})

props転送データ原則：一方向データストリーム
コンポーネント内部は、プロpsを通して渡された値を受信する。

Vue.component('son-com', {
	props: ['msg', 'parentMsg']
  template: '<div>{{msg + "---" + parentMsg}}</div>'
})

親コンポーネントは属性によって、値をサブアセンブリに渡す。

<son-com msg="     " :parent-msg="bind        "></son-com>

props属性名規則

は、propsではラクダのピークの形を使用し、テンプレートでは短い横線の形を使用する必要があります。)大文字と小文字に敏感でない

文字列にはこの制限はありません。

プロモーションタイプ

<div id="app">
 <son-com
  :str="pstr"
  :num="pnum" <!--        v-bind             -->
  :boolean="pboolean"
  :arr="parr"
  :obj="pobj"
 >
 </son-com>
</div>

Vue.component('son-com', {
 props: ['str', 'num', 'boolean', 'arr', 'obj'],
 template: `
  <div>
   <div>{{ str }}</div>
   <div>{{ num }}</div>
   <div>{{ boolean }}</div>
   <ul>
    <li :key="index" v-for="(item, index) in arr">{{ item }}</li>
   </ul>
   <div>
    <span>{{ obj.name }}</span>
    <span>{{ obj.age }}</span>
   </div>
  </div>
 `
})

var vm = new Vue({
 el: '#app',
 data: {
  pstr: 'hello Vue',
  pnum: 12,
  pboolean: true,
  parr: ['apple', 'banner', 'orange'],
  pobj: {name: 'zs', age: 22}
 }
})

サブコンポーネントは親コンポーネントに値を送る。
サブアセンブリは、カスタムイベントを通じて親コンポーネントに値$emit()を送る。

Vue.component('son-com', {
 template: `
  <div>
   <button @click="$emit('parent')">         </button>
             
	 <button @click="$emit('parent', 10)">         </button>
  </div>
 `
})

親コンポーネントモニタサブアセンブリイベント

<div id="app">
 <div>   </div>
 <son-com @parent="handle"></son-com>
 <!--        $event-->
 <son-com @parent="handle($event)"></son-com>
</div>

var vm = new Vue({
 el: '#app',
 data: {
  font: 10
 },
 methods: {
  handle: function (val) {
   this.font += 5
   this.font += val //    val            
  }
 },
})

親子以外のコンポーネント
個別のイベントセンター管理コンポーネント間の通信

//       
var hub = new Vue()

//   mounted      
hub.$on('eventName', fn)
hub.$off('eventName') //     

//   methods      
hub.$emit('eventName', param)

セットスロット

<tmp-com>
 <!--          -->
 <p slot="header">    </p>
 <div>         </div>
 <!--          -->
 <template slot="footer">
  <p>      </p>
  <p>      </p>
 </template>
</tmp-com>

Vue.component('tmp-com', {
 template: `
  <div>
   <header>
    <slot name="header"></slot>
   </header>
   <div>
                          
    <slot></slot>
   </div>
   <footer>
    <slot name="footer"></slot>
   </footer>
  </div>
 `
})

以上で、コンポーネント開発の知識についてのVueの詳細な記事を紹介します。Vueコンポーネントの開発に関する詳細は、以前の文章を検索したり、下記の関連記事を見たりしてください。これからもよろしくお願いします。