總結Vue第二天:自定義子元件、父子元件通訊、插槽

一樂樂發表於2021-12-25

總結Vue第二天:自定義子元件、父子元件通訊、插槽

一、元件:

元件目錄

1、註冊元件(全域性元件、區域性元件和小demo)

2、元件資料存放

3、父子元件通訊(父級向子級傳遞資料、子級向父級傳遞資料)

4、父子元件儲存資料的訪問:

5、 插槽slot

 

1、註冊元件(全域性元件、區域性元件和demo、template模組):

(1)註冊元件的基本步驟:

建立元件構造器物件 Vue.extend( ); 方法【可以省略】

註冊元件 Vue.component({元件的標籤名:元件構造器物件} );

使用元件,在Vue例項的作用域範圍內使用

(2)全域性元件demo:

<div id="app">
    <runoob></runoob>
</div>

<script>
// 註冊
Vue.component('runoob', {
  template: '<h1>自定義元件!</h1>'
})
// 建立根例項
new Vue({
  el: '#app'
})
</script>

(3)區域性元件demo:

<div id="app">
    <runoob></runoob>
</div>
 
<script>
var Child = {
  template: '<h1>自定義元件!</h1>'
}
 
// 建立根例項
new Vue({
  el: '#app',
  components: {
    // <runoob> 將只在父模板可用
    'runoob': Child
  }
})
</script>

(4)template模組的簡化(模板的分離寫法):即將其內容封裝到 template 標籤裡。

<!-- 使用元件 -->
<my-cpn></my-cpn>
<!-- 模板 -->
<template id="cpn">
  <div>
    <h1>nihao</h1>
  </div>
</template>

  let app = new Vue({
    el: '#app',
    components: {
      'my-cpn': {template: `#cpn`}
    }
  });

 

2、元件資料存放:

(1)元件物件也有一個data屬性

(2)☆這個data屬性必須是一個函式,且函式返回一個物件,物件內部儲存著資料

 

 

3、父子元件通訊(父級向子級傳遞資料、子級向父級傳遞資料)

(1)父級向子級傳遞資料【Prop】:

● Prop:子元件在自身標籤上,使用自定義的屬性來接收外界(也可以是父元件)的資料,然後將資料接收到prop中。【接收父元件的資料—動態Prop,需要v-bind繫結屬性,資料可以從vue例項中獲取】
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>html暫時不支援駝峰寫法</title>
</head>
<body>
<div id="app">
  <!--
   子元件要或者外界(例如也可以是父元件)的資料,它是需要在自身標籤上,使用props中自定義的屬性來接收,
   若是想接收的資料來自父元件【Vue例項】------通過繫結屬性(資料可以從vue例項中獲取)
  -->
  <!--靜態的prop-->
  <cpn c-info="info"></cpn><br/>
  <!--動態prop-->
  <cpn :c-info="info"></cpn>
</div>

<template id="cpn">
  <div>
    <h1>cpn的內容</h1>
    <ul>
      <li v-for="item in cInfo">{{item}}</li>
    </ul>
  </div>
</template>
</body>

<script type="text/javascript" src="./js/vue.min.js"></script>

<script>
  const cpn = {
    template: `#cpn`,
    props:{
      cInfo: {
        type: Object,
        default(){
          return {}
        }
      }
    },
  }

  let app = new Vue({
    el: '#app',
    data: {
      message:'動態繫結屬性v-bind',
      abc: {
        id: '1',
        name: '父類的info中的name',
        age: '1'
      },
      info: {
        id: '1',
        name: '父類的info中的name',
        age: '15'
      }
    },
    components: {
      cpn
    }
  });
</script>
</body>
</html>

 

ps:Prop 驗證(元件可以為 props 指定驗證要求):

Vue.component('my-component', {
  props: {
    // 基礎的型別檢查 (`null` 和 `undefined` 會通過任何型別驗證)
    propA: Number,
    // 多個可能的型別
    propB: [String, Number],
    // 必填的字串
    propC: {
      type: String,
      required: true
    },
    // 帶有預設值的數字
    propD: {
      type: Number,
      default: 100
    },
    // 帶有預設值的物件
    propE: {
      type: Object,
      // 物件或陣列預設值必須從一個工廠函式獲取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定義驗證函式
    propF: {
      validator: function (value) {
        // 這個值必須匹配下列字串中的一個
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

(2)子級向父級傳遞資料【emit】:

● 子元件通過$emit(‘自定義事件名’, 資料變數)向父元件傳送訊息,在子元件進行自定義的事件進行監聽【監聽呼叫的函式可以直接通過一個自定義的引數接收到資料變數】
<!-- 父元件 -->
<div id="app">
  <!-- 子元件上監聽到自定義的事件的同時,也監聽到傳送的資料num,事件指向的函式,通過自定義一個引數value可以直接拿到資料num  -->
  <cpn :c-info="info" @item-click="itemClick"></cpn>
</div>
<!-- 子元件的模板 -->
<template id="cpn">
  <div>
    <h1>子元件的模板</h1>
      <button v-for="item in cInfo"  @click="btnClick(item)">{{item}}</button>
  </div>
</template>
</body>

<script type="text/javascript" src="js/vue.min.js"></script>

<script>
  const cpn = {
    template: `#cpn`,
    data(){
      return{
        num: 99
      }
    },
    props:{
      cInfo: {
        type: Object,
        default(){
          return {}
        }
      }
    },
    methods: {
      btnClick(item){
        console.log('子元件接收到父元件傳遞的資料' + item);
        //$emit的第一個引數是自定義的事件名稱和傳送資料num
        this.$emit('item-click', this.num);
      }
    }
  }

  let app = new Vue({
    el: '#app',
    data: {
      info: {
        id: '1',
        name: 'yile',
        age: '15'
      }
    },
    methods: {
      itemClick(value){
        console.log('父元件監聽到子元件發出的事件和接收到子元件的資料' + value);
      }
    },
    components: {
      cpn
    }
  });
</script>

 

4、Vue父子元件儲存資料的訪問:

(1)父元件訪問子元件data中儲存的資料:使用$children或 $refs

(注意:this.$children得到的是一個陣列,包含所有子元件物件。)

(2)$refs的使用:

       ■ $refs和ref指令通常是一起使用的

         ■ 首先,我們通過ref給某一個子元件繫結一個特定的ID

         ■ 其次,通過this.$refs.ID就可以訪問到該元件了

 

(3)子元件訪問父元件:使用$parent

 

二、插槽slot

1、編譯作用域:

父元件模板的所有東西(例如變數)都會在父級作用域內編譯;子元件模板的所有東西都會在子級作用域內編譯。

2、slot基本使用:

3、具名插槽slot:

 

 

 

 

相關文章