vue(11)----カスタムコンポーネント、コマンド、イベント

46201 ワード
vue.js
カスタムコンポーネント
ケース:Loadingコンポーネントをカプセル化Loadingは何に使いますか?ユーザー・エクスペリエンス・ベース
  • サードパーティのuiライブラリ/コンポーネントライブラリ
  • カスタムパッケージ
  • プロセス:
  • Loading
    • と呼ばれるディレクトリフォルダを作成します.
  • テンプレート
    • を配置するためにloadingにcomponentというディレクトリを作成する
  • Loadingディレクトリの下にindexを作成する.js 
    • ~ import Vue from 'vue'
  import tpl from './component/index.html'
  const Loading = {
    //        ，  loading          key
    install () {
      Vue.component( 'Loading', {
        template: tpl
      })
    }
  }
  export default Loading

    カスタムコマンド
  • 命令はDOM
    • を操作するための命令である.
  • 命令の使用形態:属性
  • カスタム命令方式は2種類あります.
  • グローバル登録命令Vue.Directive(命令の名称、命令の構成項目)
  • ローカル登録命令directives:{‘命令名’:命令の構成項目}
  • 命令の構成項目は、5つのフック関数
    • を提供する.
  • bind(el,binding,vnode,oldVnode){}//一度呼び出すと、命令が要素にバインドされるとトリガーされます.
  • el命令バインド要素
  • binding命令の詳細
  • vnode現在のバインド要素の情報
  • oldVnode前のバインド要素の情報
  • inserted(el,binding,vnode,oldVnode){}//現在バインドされている要素が親ノードに挿入されたときに呼び出されます.
  • el命令バインド要素
  • binding命令の詳細
  • vnode現在のバインド要素の情報
  • oldVnode前のバインド要素の情報
  • update(el,binding,vnode,oldVnode){}//現在の命令バインドの要素が変更されました.
  • el命令バインド要素
  • binding命令の詳細
  • vnode現在のバインド要素の情報
  • oldVnode前のバインド要素の情報
  • componentUpdated(el,binding,vnode,oldVnode){}//現在のバインド要素が変更されたり、サブ要素が変更されたりします.
  • unbind(el,binding,vnode,oldVnode){}//コンポーネント破棄時にトリガーされます.
  • ケース:Webページを開くと、inputは自動的にフォーカス
    • を取得します.
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script>
  <style>
    .box{
      width: 300px;
      height: 300px;
      background: blue;
    }
  style>
head>
<body>
  <div id="app">
    <div class="box">

    カスタムイベント
    v-on:aa = ‘fn’
  • カスタムイベントの使用方法
  • コンポーネントのライフサイクル中にイベントをパブリッシュし、あるイベントハンドラによって
    • を呼び出す.
  • はコンポーネントにバインドされ、v-onによって
    • にバインドされる.
    
<div id="app">
    <button @click = 'fn'>    </button>
  </div>
  
 var vm = new Vue({
    el: '#app',
    methods: {
      fn () {
        this.$emit('aa')
      }
    },
    mounted () {
      this.$on('aa',function(){
        alert('aa')
      })
    }
  })

    コンポーネント通信
    親子コンポーネント通信
  • 親子コンポーネント通信:親コンポーネントが自分のデータを子コンポーネントに渡す
  • 親コンポーネントは、属性バインドによって自分のデータをサブコンポーネントに渡す

  • サブコンポーネントは、この属性
     Vue.component('Son',{
     template: '#son',
     // props: ['aa'],
     props: {
       //   ：                  ，      
       'aa': Number 
     }
   })
    • を自分の構成項目でpropsによって受信する.
  • このプロパティは、グローバル変数と同様に直接使用できます.

  • ：{{ aa }} 


    • Vue.component('Father',{
    template: '#father',
    data () {
      return {
        money: '1000'
      }
    }
  })
  Vue.component('Son',{
    template: '#son',
    // props: ['aa'] //           ，     ，      
    props: {
      //   ：                  ，      
      'aa': Number 
    }
  })
  new Vue({
    el: '#app'

    子親コンポーネント通信
  • カスタムイベント
  • プロセス
  • 親コンポーネントでデータを定義し、methodsでこのデータ
       Vue.component('Father',{
      template: '#father',
      data () {
        return {
          num: 0
        }
      },
      methods: {
        add ( val ) {
          console.log('add')
          this.num += val
        }
      }
    })
    • を変更する方法を定義します.
  • 親コンポーネントカスタムイベントの形式で、親コンポーネントのメソッドを子コンポーネントに渡します.

  • サブアセンブリはthis.$Emit(カスタムイベント名、パラメータ1、パラメータ2...)は、このカスタムイベントを購読します.
  • this.$emit('aa',this.money)


  • 親コンポーネントは、方法を直接一方向データバインディングの形でサブコンポーネントに渡し、サブコンポーネントはpropsで受信し、
     <div id="app">
    <Father>Father>
div>
<template id="father">
        <div>
          <h3>    father h3>
          <p>      {{ money }}   p>
          <hr>
          Son>
        div>
      template>
<template id="son">
        <div>
          <h3>    son h3>
    • を直接使用する.
  • 親コンポーネントは、オブジェクト型のデータを子コンポーネントに渡すことができ、子コンポーネントはこのデータを変更し、親コンポーネントも
    • を変更する.
  • この形式は一方向データストリームに違反し、
    • 少ない
    非親子通信
  • 非親子コンポーネント通信の第1の形式:refチェーンバインド.refは、コンポーネントだけでなく、通常の要素もバインドできます.
    •      <div id="app">
    Brother>
    <hr>
    Sister>
    
    div>
  div>
  <template id="brother">
    <div>
      <h3>    brother h3>
    C++STL学習ノート1--vector
    vue watchを使用して複数のプロパティを同時にリスニングする