vueコンポーネントの入門知識は全部整理します。

3961 ワード
vue コンポーネント
コンポーネント

コンセプト：templateは入り口のコンポーネントで、templateの下にマウントされているコンポーネントは入り口のコンポーネントのサブコンポーネントです。
ローカルコンポーネント
三歩の九九：フォノン、掛子、用子
  • は、変数名の頭文字を大文字にした部分構成要素（H 5タグと区別するため）を宣言しています。中身はvue実装オブジェクトの内容と似ていますが、elは必要ありません。dataは関数でなければなりません。関数はオブジェクト
    • を返します。
  • は、コンポーネントを入り口ファイルのcomponentsオブジェクトにマウントする。
  • は、エントランスファイルのtemplateで使用され、ダブルクローズラベルでも良いし、シングルクローズラベルでもいいです。
    グローバルコンポーネント
    Vue.com onent（name，options）
    最初のパラメータはコンポーネントの名前です。
    二つ目のパラメータはコンポーネントのオブジェクトです。
    注意グローバルコンポーネントは、Vue実装オブジェクトを作成する前にエラーが発生します。
    
 //     (    Vue    )
 Vue.component('Vbtn', {
 template: `<button>      </button>`
 })
 // 1、        
 // 2、      ，          
 var Heard = {
 template: `
 <div>
 <h2>      </h2>
 <Vbtn></Vbtn>
 </div>
 `
 }
 var Aside = {
 template: `
 <div>       </div>
 `
 }
 var Content = {
 template: `
 <div>      </div>
 `
 }
 var App = {
 template: `
 <div class="main">
 <Heard class = "heaed"></Heard>
 <div class="main2">
 <Aside class="aside"></Aside>
 <Content  class="content"/>
 </div>
 </div>
 `,
 components: {
 Heard,
 Aside,
 Content
 }
 }
 new Vue({
 el: "#app",
 data() {
 return {
 msg: "    "
 }
 },
 template: `
 <App></App>
 `,
 components: {
 App
 }
 });
    コンポーネントの深さ
    なぜ父を通してデータを得て、サブアセンブリに伝達しているのですか？
    父亲がバックエンドにデータを取得し、各コンポーネントに配布することでバックエンドのインタラクションを减らすことができます。
    下図を参照してください

    親子コンポーネントパス（親パス）
    1、親が子を使う時は、カスタム属性をバインドして渡すことで、
    2、子要宣言props:「'属性'」受信親バインディングのカスタム属性
    3、受け取ったら自分の使い勝手です。
    templateで直接jsにthis.属性名を使用します。

    小補足：カスタム属性をバインドする場合：定数転送を直接使用し、変数転送にコロンを追加します。
    父の伝子を締め括る
    父は子を使います。
    父传子：父传子（属性）、子声明（受信）、子使用
    子伝の父
    1、親がサブバインディングでカスタマイズしたイベント
    2、サブトリガカスタムイベント：this.$emit()
    
      **      **
      **      **
![image](/img/bVbO3Ps)
    グローバルコンポーネントのデータ転送1、VUE内蔵コンポーネントslotでコンテンツを配信する
    理由：slotを使わないとグローバルコンポーネントの内容が変更できないからです。
    役割：slaot元素は配信コンテンツの輸出として提供されます。
    2、親子传値
    カスタム属性の伝達定数を直接使用すると、コロンを付ける必要はありません。

    原生をトリガするイベントは@原生イベント名.nativeで呼び出す必要があります。

    3、名前付きスロット
    サブコンポーネントでvueの内蔵コンポーネントの使用を宣言します。
    
<slot name = "one"></slot>
    親コンポーネントで呼び出し
    
<h2 slot= "one"></h2>
    このようにする目的：一つのデータを一つのピットにしてもいいです。データは乱れません。
    付加機能
    1、フィルタfilters
    1、役割：現在のデータに対して、酢を加える
    2、文法：コンポーネント内でfiltersオブジェクトを使用すると宣言し、関数を返します。関数は必ず戻り値があります。
    3、呼び出し：templateでフィルタを呼び出す：データ属性|フィルタの名前
    
var Content = {
  template: `
   <div>
   <input type = number  v-model = "msg"/>
   <h2>{{msg|RmbData}}</h2>
   </div>
  `,
  data(){
   return{
   msg:10
   }
  },
  filters:{
   RmbData(value){
   return '$'+value
   }
  }
 }
    ライフサイクル
    締め括りをつける
    ここでvueコンポーネントの入门に関する知识を整理した文章をここに绍介します。vueコンポーネントに関する知识の内容は以前の文章を検索したり、下の関连した文章を引き続きご覧ください。これからもよろしくお愿いします。
    • 簡単な分析はどのようにtnsnames.oraの中で傍受を配置しますか？
    コンピューターシティで三年間マシンを入れた時の心得を混ぜました。