Vue學習筆記-元件

1、基礎元件

注冊元件：使用component（）方法，該方法裡面需傳人兩個參數：name【下面引用元件用】，obj【設定元件内容，data屬性和template屬性，data存放元件中參數，template值是一個html格式的字元串】

// 定義一個新的元件，名稱為 button-counter
Vue.component('button-counter', {
data: function () {
    return {
    count: 0
   }
},
template: '<button v-on:click="count++">你點選了 {{ count }} 次。</button>'
})

使用元件：首先需要建立Vue對象，然後在聲明的對象裡将屬性名當作html的元素名使用即可

var vm=Vue({
  el:"app",
})；//js部分代碼

<!--html代碼--!>
<div id="app">
  <button-counter></button-counter>
</div>

2、複用元件

重複使用元件時，為防止data變量互相幹擾，在注冊元件時data必須是一個函數，傳回一個對象。

3、傳值

無論是父傳子還是子傳父，首先要厘清楚誰是父，誰是子。子與父并不是指兩個vue檔案，父是指使用元件的整體，子是指建立的模闆。

a、父傳子（通過props傳值）

子元件：是指元件建立時用到的html元素

在建立時設定一個props屬性，屬性值是一個數組，數組裡添加需要傳入的參數名，再template的用法跟data中的值一樣，直接輸入參數名即可。

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

父元件在使用子元件時，需要在元素标簽裡面添加一個屬性名，需要傳入的值指派給該屬性，即可向子元件傳參

<blog-post title="我的 Vue 旅程"></blog-post>

注：父元件給子元件傳遞一個靜态字元串類型的參數是可以直接如上直接用title=“”的格式傳遞，但是如果你先傳遞一個動态資料時，需要用v-bind綁定。

子元件的接收方式沒什麼差別，但是父元件傳遞時需要改變一下。例如傳遞obj(一個對象),一個數組，此時子元件的建立方式是一樣的，但是父元件的傳值方式要做改變。

<template>
  <div id="zujian">
    <!--<demo title="傳遞一個固定值字元串"></demo>-->
  <!--傳遞一個對象-->
   <!--<obj-demo :obj="objs"></obj-demo>-->
  <!--傳遞一個數組-->
    <arr-demo v-for="item in stu" :key="item.id" :name="item.name"></arr-demo>
  </div>
</template>
<script>
  import Vue from 'vue'
  export default{
      name:"zujian",
    data(){
      return {
          objs:{
              name:"測試zhong"
          },
          stu:[
            {id:1,name:"周"},
            {id:2,name:"劉"},
            {id:3,name:"董"},
          ]
      };
    },
    components:{
        "demo":{
            props:['title'],
            template:'<h3>{{title}}</h3>'
        },
        "obj-demo":{
            props:['obj'] ,
            template:'<h2>{{obj.name}}</h2>'
        },
        "arr-demo":{
          props:['name'],
          template:"<h2>{{name}}</h2>"
        }
    }
  }
</script>

b、子傳父

子元件向父元件傳值需要通過事件和來實作$emit來實作，在子元件注冊時添加事件，在事件内使用$emit來觸發一個自定義事件，并傳入一個值，父元件通過綁定該自定義的事件來擷取子元件傳入值。

子元件：

<template>
  <!--template隻能有一個孩子節點-->
  <div>
    <h2>{{name}}</h2>
    <button @click="sendMes">點選向父元件傳值</button>
  </div>
</template>
<script>
  export default{
      props:['name'],
      methods:{
          sendMes:function () {
            this.$emit('getMes',"子元件傳入值")
          }
      }
  }
</script>

父元件：

<template>
  <div>
    <h2>{{values}}</h2>
    <cinema-son @getMes="showMes"></cinema-son>
  </div>
</template>
<script>
  import cinemaSon from "../components/cinemaSon.vue"
  export default{
      data(){
          return {
              values:'初始值',
          }
      },
      components:{
          cinemaSon
      },
    methods:{
          showMes:function (data) {
            this.values=data;//this指向Vue
          }
    }
  }
</script>

4、項目中元件開發

項目中元件的開發，子元件可以是一個單獨的vue檔案，但是在父元件中使用子元件要把子元件注冊進去

子元件：

<template>
  <!--template隻能有一個孩子節點-->
  <div>
    <h2>{{name}}</h2>
    <button @click="showAlert">點選</button>
  </div>
</template>
<script>
  export default{
      props:['name'],
      methods:{
          showAlert:function () {
            alert("子元件");
          }
      }
  }
</script>

父元件：

<template>
  <div>
    <cinema-son name="傳值"></cinema-son>
  </div>
</template>
<script>
  import cinemaSon from "../components/cinemaSon.vue"
  export default{
      components:{
          cinemaSon
      }
  }
</script>

5、插槽内容（slot：内容分發）

插槽，也就是slot，是元件的一塊HTML模闆，這塊模闆顯示與不顯示，以及怎樣顯示由父元件決定。slot的兩個核心問題是顯示不顯示與怎麼顯示。插槽slot跟'div、span'這些一樣，直接寫在界面中。雖然它的顯示不顯示由父元件決定，但是它顯示的位置由子元件決定，子元件中它寫在哪個位置，父元件傳過來的子產品就顯示在什麼位置。

插槽分為單個插槽、具名插槽和作用域插槽。

單個插槽，又叫預設插槽，它可以放在任何位置，但是一個元件隻能有一個該類插槽。

父元件控制模闆内容，并通過child（child為引入的子元件名字）傳遞：

<template>
    <div class="father">
        <h3>這裡是父元件</h3>
        <child>
            <div class="tmpl">
              <span>菜單1</span>
              <span>菜單2</span>
              <span>菜單3</span>
              <span>菜單4</span>
              <span>菜單5</span>
              <span>菜單6</span>
            </div>
        </child>
    </div>
</template>
<script>
import child from ""
</script>

子元件則隻需要在需要的位置添加

<slot></slot>

具名插槽，需要添加name屬性，具名插槽可以在一個元件裡出現多次。

在父元件中通過添加上slot屬性，來區分不同的具名插槽需要插入的内容。

<template>
  <div class="father">
    <h3>這裡是父元件</h3>
    <child>
      <div class="tmpl" slot="up">
        <span>菜單1</span>
        <span>菜單2</span>
        <span>菜單3</span>
        <span>菜單4</span>
        <span>菜單5</span>
        <span>菜單6</span>
      </div>
      <div class="tmpl" slot="down">
        <span>菜單-1</span>
        <span>菜單-2</span>
        <span>菜單-3</span>
        <span>菜單-4</span>
        <span>菜單-5</span>
        <span>菜單-6</span>
      </div>
      <div class="tmpl">
        <span>菜單->1</span>
        <span>菜單->2</span>
        <span>菜單->3</span>
        <span>菜單->4</span>
        <span>菜單->5</span>
        <span>菜單->6</span>
      </div>
    </child>
  </div>
</template>

子元件要給slot添加對應的name屬性

// 具名插槽
    <slot name="up"></slot>
    <h3>這裡是子元件</h3>
    // 具名插槽
    <slot name="down"></slot>
    // 匿名插槽
    <slot></slot>

作業域插槽，其實也可以叫做帶資料插槽，它要去在slot上面綁定資料。這樣就成了樣式父元件說了算，但是内容子元件可以規定。

子元件通過綁定data事件傳遞值（綁定是data裡的資料）

<template>
  <div class="child">

    <h3>這裡是子元件</h3>
    // 作用域插槽
    <slot  :data="arr"></slot>
  </div>
</template>

 export default {
    data: function(){
      return {
        arr: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
      }
    }
}

父元件通過 slot-scope接收資料

<template>
  <div class="father">
    <h3>這裡是父元件</h3>
    <!--第一次使用：用flex展示資料-->
    <child>
      <template slot-scope="user">
        <div class="tmpl">
          <span v-for="item in user.data">{{item}}</span>
        </div>
      </template>

    </child>

    <!--第二次使用：用清單展示資料-->
    <child>
      <template slot-scope="user">
        <ul>
          <li v-for="item in user.data">{{item}}</li>
        </ul>
      </template>

    </child>

    <!--第三次使用：直接顯示資料-->
    <child>
      <template slot-scope="user">
       {{user.data}}
      </template>

    </child>

    <!--第四次使用：不使用其提供的資料, 作用域插槽退變成匿名插槽-->
    <child>
      我就是模闆
    </child>
  </div>
</template>

6、動态元件

簡單的說就是幾個元件放在一個挂載點下，通過綁定is屬性的變量（is綁定的值是元件名）來決定顯示哪一個。

<template>
  <div id="zujian">
    <button @click="toshow">點選</button>
    <component :is="showIndex"></component><!--此處節點名是comopent，多個元件在此切換-->
  </div>
</template>
<script>
  import Vue from 'vue'
  export default{
      name:"zujian",
    data(){
      return {
        showIndex:"",
      };
    },
    methods:{
      toshow: function () {   //切換元件顯示
        var arr = ["first", "second", "third", ""];
        var index = arr.indexOf(this.showIndex);
        if (index < 3) {
          this.showIndex = arr[index + 1];
        } else {
          this.showIndex = arr[0];
        }
      }
      },
    components: {
      first: { //第一個子元件
        template: "<div>這裡是子元件1</div>"
      },
      second: { //第二個子元件
        template: "<div>這裡是子元件2</div>"
      },
      third: { //第三個子元件
        template: "<div>這裡是子元件3</div>"
      },
    }
  }
</script>

動态元件中還有幾個常用屬性，下面做個簡單的介紹。

屬性	用途	例子
keep-alive	原本每次切換都會在父元件的this.$chilren裡面添加一個子元件，添加該屬性後不再會重複添加	<component v-bind:is="showIndex" keep-alive></component>
activate鈎子	延遲加載，跟template、data等屬性平級，值是一個函數，當這個函數執行時，才會切換元件
transition-mode	過渡模式，動态元件切換時，讓其出現動畫效果，預設是進入和退出一起，但是也可以通過該屬性更改，值有“in-out"、 "out-in"、也可以與transition配合，自定義過渡方式	<component v-bind:is="showIndex" transition="bounce" transition-mode="out-in"></component> Vue.transition("bounce",{ enterClass:"", leaveClass:"" //填寫類名 })

Vue學習筆記-元件

1、基礎元件

2、複用元件

3、傳值

4、項目中元件開發

5、插槽内容（slot：内容分發）

6、動态元件

繼續閱讀

安卓學習筆記（九）網絡程式設計網絡程式設計

安卓學習筆記（一） Activity篇

vue 中英文切換

【GIT】git指令行代碼送出流程及注意事項

Django項目實戰——3—(圖形驗證碼後端邏輯、短信驗證碼、短信驗證碼後端邏輯)1、圖形驗證碼後端邏輯2、短信驗證碼3、短信驗證碼後端邏輯

django短信驗證碼的後端實作

天池龍珠計劃Python訓練營-task2筆記清單元組字元串字典集合序列

2022秋招cpp相關面試總結（長期更新）1、記憶體對齊2、類的占用空間死鎖elf優化bin檔案c語言和c++中const差別sizeof原理malloc一塊記憶體free怎麼找到頭尾

2022秋招面試總結（cpp+java+測開）百度測開一面位元組後端一面蝦皮後端一面蝦皮後端二面

nagios服務端搭建

vue3 transitionvue3 transition元件和vue2 transition元件

Apache 虛拟主機搭建過程

vue學習筆記day12 vue的生命周期

父子元件間傳值的實作父子元件間傳值的實作

判斷浏覽器類型與版本以及ios安卓判别

手把手教你配置：Jenkins+Github+Webhook +Nginx自動化打包部署Vue項目