組件傳值

父傳子(子組件設置props屬性)

實例代碼

1. 子組件設置

   • const app = new Vue({
         ......,
         props:['addList']
     })
     

   • 1）子組件接收父組件傳遞的參數(shù)，設置的名自定義，但名字一定是有意義的名字，避免后續(xù)更改代碼更好更改

   • 2）接收到的參數(shù)可以進行遍歷，或者是直接進行使用，直接使用props；里面定義的名字即可

   <ul>
       <li v-for="item in addList" :key="item.id"></li>
   </ul>
   

2. 父組件設置

   • 父組件在傳遞值是，將在定義好在data里面的數(shù)據(jù)傳遞給子組件進行使用。

   <組件名 :add-list='itemList'></組件名>
   <script>
     const app = new Vue({
         data:{
             itenList:[1,2,3,4,5,6]
         }
     })
   </script>
   

   • 子組件設置props命名使用addlist，父組件綁定時使用v-bind綁定 :add-list的形式進行使用

3. 在傳值的時候，如果父組件向子組件傳遞的是字符串，則不需要v-bind綁定，如果傳遞的是變量，則需要通過v-bind進行綁定

props屬性參數(shù)

1)、方式一
props: {
    addList: [Array,Object]
}

2)、方式二
props: {
    add;ist: {
        type: [Array, Object],
        required: true,
        default:'默認值',
        validator: function (newValue) {
            return 
        }
    }   
}

1. 參數(shù)1：type代表的是，指定傳遞父組件傳遞過來的參數(shù)是什么類型
2. 參數(shù)2：required代表的是，畢傳值，意思就是子組件設置了這條屬性，必須傳遞值過來
3. 參數(shù)3：default代表的是，默認值，當父組件傳遞過來的參數(shù)，接收不到，子組件將使用默認值進行展示
4. 參數(shù)4：validator代表的是，對傳遞過來的內(nèi)容做具體的檢測，返回一個布爾值，ture執(zhí)行false不執(zhí)行。函數(shù)內(nèi)部不可以使用this找到當前組件的data等數(shù)據(jù)。

子傳父

通過使用自定義事件向父組件傳遞值

子組件發(fā)生變化，通過$enit()觸發(fā)一個自定義事件

使用場景，子組件發(fā)生了一些事件，告訴父組件發(fā)生了什么事件，并且告訴父組件，現(xiàn)在發(fā)生事件這里對應點擊的數(shù)據(jù)是誰，然后給父組件傳遞過去，父組件根據(jù)子組件傳遞過來的數(shù)據(jù)，去服務器請求新的數(shù)。在傳遞給子組件，讓子組件進行渲染

1. 子組件設置

   <button @click='submit(item)'></button>
   <script>
    const app = new Vue({
           .....,
           methods: {
             submit (item) {
            this.$emit('onclicks'，item)
          }
           }
       })
   </script>
   

   • 通過點擊按鈕，發(fā)送一個自定義事件，第二個參數(shù)是默認值，可以將當前行數(shù)據(jù)傳遞給父組件，進行處理

2. 父組件

   <組件名 @onclicks="btnsLiks"></組件名>
   <script>
    const app = new Vue({
         ...,
         methods: {
        btnsLiks (item) {  // 需要接收子組件傳過來的默認值
            // 請求數(shù)據(jù)等處理
        }
      }
    })
   </script>
   

   • 父組件使用v-on綁定子組件發(fā)送過來的自定義事件名@onclicks
   • 綁定結束后，需要書寫一個方法，處理數(shù)據(jù)或者是請求等
   • 接收參數(shù)時，如果是在模板上書寫，可以使用$event進行接收, 如果是在處理程序內(nèi)書寫，直接向上面是寫一樣，進行處理，參數(shù)名自定義

組件與v-model

舉例說明使用方式

1. 子組件

   <img src="value" />
   <button @click="submit(item)">上傳圖片</button>
   
   <script>
    export default {
           props:{
               value: String
           },
           methods: {
               submit () {
                   this.$emit('input',item)
               }
           }
       }
   </script>
   

   • 子組件觸發(fā)按鈕，發(fā)送一個自定義事件，向父組件傳遞參數(shù)。props是接收父組件傳遞回來的參數(shù)

2. 父組件

   <組件名 v-model='images'></組件名>
   
   <script>
    export default {
          data () {
              return {
                  images:''
              }
          }
       }
   </script>
   

   • 父組件通過v-model進行參數(shù)接收，然后再講參數(shù)返回給子組件

• 我們知道，v-model 是由v-bind與@input事件構成的，他分開寫是下面的形式

<input  :value="value" @input="value = $event.target.value" />

拿那個課程上傳課程封面來說，單獨抽出來放在一個組件，子組件發(fā)送自定義事件，父組件通過v-model進行接收，父組件需要這個參數(shù)保存信息，然后在通過父子傳值傳遞給子組件（props），關鍵來了，在這之間有一個 v-model 特可以分開寫成v-bind與@input，我剛才一直想不通的是在這之間，他是怎么把值存起來的，找了一下，發(fā)現(xiàn)v-model分開寫，@input的部分是這么寫的，@input=" 某一個值 = $event.target.傳遞過來的值 "，我才發(fā)現(xiàn)在這之間他把這個值存到了下面的變量里面，在通過父子傳值，將這個變量內(nèi)部的信息傳遞給子組件，進行使用

非父子組件傳值(EvenBus)

是一個獨立的事件中心，用于管理不同的組件之間傳值操作，特點是獨立

使用方式

eventbus是通過新的實例管理組件傳值操作，組件通過給實例注冊事件，調(diào)用事件實現(xiàn)數(shù)據(jù)的傳遞

新的vue實例是不需要傳遞任何選項，比如說el選項等，一般會在單個js文件內(nèi)部進行定義

var bus = new Vue()

在使用時需要引入js文件

1. 要傳遞數(shù)據(jù)的組件

   • 通過組件發(fā)送自定義事件，但在處理程序里，不是通過this打點使用$emit，而是通過bus進行調(diào)用

   <button @click='submit(value)'></button>
   <script scr="bus.js"></script>
   <script>
    export default {
           ......,
           methods: {
            submit () {
                   bus.$emit('change',value)
               }
        }
       }
   </script>
   

2. 接收數(shù)據(jù)的組件

   • 接收參數(shù)的組件內(nèi)部需要通過$on 給bus注冊事件

   <script>
    export default {
           data () {
               return {
                   value: ''
               }
           },
           methods: {
               bus.$on('change',function (item) {
                this.value = item
            })
           }
       }
   </script>
   

   • $on內(nèi)部需要書寫兩個參數(shù)，第一個參數(shù)代表的是，傳值組件傳遞過來的自定義事件名稱，參數(shù)二是時間處理程序，內(nèi)部接收到的參數(shù)是組件傳遞過來的值，參數(shù)名自定義。

$refs

操作html元素,通過此方法可以獲取到html元素

通過給html標簽設置ref屬性：屬性參數(shù)自定義名字

然后在通過$refs.屬性調(diào)用方法

<input  type="text" ref="ipt">
<buttton @click="k">點擊按鈕</buttton>
<script>
    new Vue({
        el:"#app",data:{},
        methods:{
            k:function(){
                //設置ref通過refs調(diào)用
                this.$refs.ipt.focus()
            }
        }
    })
</script>

組件插槽

設置組件的思想，抽取共性，保留不同

1. 最好的方式就是將相同的組件抽取出來，將不同的地方設置成插槽
2. 一旦封裝的組件預留插槽，在不同的頁面上，根據(jù)不同的需求，插入不同內(nèi)容