vue学習ノート(二)

30903 ワード

コンポーネント:コンポーネントは多重化可能なVueインスタンスであるため、data、computed、watch、methods、ライフサイクルフックなど、new Vueと同じオプションを受信します.唯一の例外はelのようなルートインスタンス特有のオプションです.テンプレートで使用できるように、これらのコンポーネントはVueが認識できるように登録する必要があります.ここには、グローバル登録とローカル登録の2つのコンポーネントの登録タイプがあります.グローバル登録:

//        button-counter     
Vue.component('button-counter', {   //        ，          
  data: function () {  //data       ，                       ：
    return {
      count: 0
    }
  },
  template: ''
})

<div id="components-demo">
  <button-counter></button-counter>  //              
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

new Vue({ el: '#components-demo' })

ローカル登録:

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }
//    components              ：
new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

親コンポーネントからサブコンポーネントへの値の転送:v-bindプロパティでバインド

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

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' }
    ]
  }
})

<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:title="post.title"
></blog-post>

サブコンポーネントから親コンポーネントへの値の転送:v-onイベントによるバインド

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

<div id="blog-demo">
  <div :style="{ fontSize: postFontSize + 'em' }">
    <blog-post v-for="post in posts" :key="post.id" :post="post" @enlarge-text="postFontSize += 0.1"></blog-post>
  </div>
</div>

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

组件插槽：

Vue.component('alert-box', {
  template: `
    
      Error!
        //     
    
  `
})


<alert-box>
  Something bad happened.
</alert-box>

スロットにはHTML、さらには他のコンポーネントを含むテンプレートコードを含めることができます.templateに要素が含まれていない場合、コンポーネントの開始ラベルと終了ラベルの間のコンテンツはすべて破棄されます.このスロットは、テンプレートの他の場所と同様に、同じインスタンスproperty(つまり、同じ役割ドメイン)にアクセスできますが、アクセスできない役割ドメインにアクセスできます.

<navigation-link url="/profile">
  Logged in as {{ user.name }}---{{url}}  //    user.name       url，  url       ，           
</navigation-link>

バックアップ内容:

//        ：
<button type="submit">
  <slot>Submit</slot>   //submit     
</button>
//     
<submit-button></submit-button> 
//    “Submit”     ：
<button type="submit">
  Submit
</button>
//          ：
<submit-button>
  Save
</submit-button>
//                     ：
<button type="submit">
  Save
</button>

名前付きスロット:

<div class="container">
  <header>
    <slot name="header"></slot>   //     header
  </header>
  <main>
    <slot></slot>      //       default
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

<base-layout>
  <template v-slot:header>    //   v-slot   ，   v-slot            
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>  //         v-slot   
  <p>And another one.</p>

  <template #footer>   //v-slot:       #，               
    <p>Here's some contact info</p>
  </template>
</base-layout>

//           ：
<div class="container">
  <header>
    <h1>Here might be a page title</h1>
  </header>
  <main>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </main>
  <footer>
    <p>Here's some contact info</p>
  </footer>
</div>

≪アクティブドメイン・スロット｜Active Domain Slots｜oem_src≫:サブアセンブリに固有のデータにアクセスできるスロット・コンテンツ

<span>
  <slot v-bind:user="user">  //  user           attribute     
    {{ user.lastName }}
  </slot>
</span>

<current-user>
  <template v-slot:default="slotProps">   //       ，          v-slot            prop    ：
    {{ slotProps.user.firstName }}
  </template>
</current-user>
//      v-slot          ，       ：
<current-user v-slot="slotProps"> 
  {{ slotProps.user.firstName }}
</current-user>

ダイナミックコンポーネント:

<component v-bind:is="currentTabComponent"></component> 
//      ，currentTabComponent             ，

prop:

<!--  prop         -->
<blog-post title="My journey with Vue"></blog-post>

<!--            -->
<blog-post v-bind:title="post.title"></blog-post>

<!--               -->
<blog-post v-bind:title="post.title + ' by ' + post.author.name"></blog-post>

<!--    `42`     ，       `v-bind`     Vue -->
<blog-post v-bind:likes="42"></blog-post>

<!--    `false`     ，       `v-bind`     Vue -->
<blog-post v-bind:is-published="false"></blog-post>

<!--         ，       `v-bind`     Vue -->
<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>

<!--         ，       `v-bind`     Vue -->
<blog-post v-bind:author="{ name: 'Veronica', company: 'Veridian Dynamics'}"></blog-post>

カスタムイベントかすたむいべんと:イベント名は短い横線で書式設定されています

面接:Vue配列の変異方法

vueの親コンポーネントと子コンポーネントの「値」は文法糖を双方向にバインドする.sync’