可乐操伊人5588,福利姬精品视频在线,九九色视频在线观看

1、props父?jìng)髯?br> 2、emit 子傳父
3、vuex全局通訊
4、EventBus:這種方法通過一個(gè)空的Vue實(shí)例作為中央事件總線（事件中心），用它來觸發(fā)事件和監(jiān)聽事件,巧妙而輕量地實(shí)現(xiàn)了任何組件間的通信，包括父子、兄弟、跨級(jí)。當(dāng)我們的項(xiàng)目比較大時(shí)，可以選擇更好的狀態(tài)管理解決方案vuex。
https://blog.csdn.net/caoxinjian423/article/details/108965056
Event. $emit("方法名"，data)發(fā)送，Event.$ on("方法名",data)接收

 var Event=new Vue();
 Event.$emit(事件名,數(shù)據(jù))//發(fā)送事件
 Event.$on(事件名,callback);//接收事件，callback監(jiān)聽當(dāng)前實(shí)例上的自定義事件
 事件可以由 vm.$emit 觸發(fā)。回調(diào)函數(shù)會(huì)接收所有傳入事件觸發(fā)函數(shù)的額外參數(shù)。
 vm.$once(事件, callback )
 監(jiān)聽一個(gè)自定義事件，但是只觸發(fā)一次。一旦觸發(fā)之后，監(jiān)聽器就 
 會(huì)被移除。
 Event.$off( [event, callback] )
 移除自定義事件監(jiān)聽器。
 如果沒有提供參數(shù)，則移除所有的事件監(jiān)聽器；
 如果只提供了事件，則移除該事件所有的監(jiān)聽器；
 {string | Array<string>} event (只在 2.2.2+ 支持?jǐn)?shù)組)

<div id="itany">
    <my-a></my-a>
    <my-b></my-b>
    <my-c></my-c>
</div>
<template id="a">
  <div>
    <h3>A組件：{{name}}</h3>
    <button @click="send">將數(shù)據(jù)發(fā)送給C組件</button>
  </div>
</template>

<template id="b">
  <div>
    <h3>B組件：{{age}}</h3>
    <button @click="send">將數(shù)組發(fā)送給C組件</button>
  </div>
</template>

<template id="c">
  <div>
    <h3>C組件：{{name}}，{{age}}</h3>
  </div>
</template>
<script>
var Event = new Vue();//定義一個(gè)空的Vue實(shí)例
var A = {
    template: '#a',
    data() {
      return {
        name: 'tom'
      }
    },
    methods: {
      send() {
        Event.$emit('data-a', this.name);
      }
    }
}
var B = {
    template: '#b',
    data() {
      return {
        age: 20
      }
    },
    methods: {
      send() {
        Event.$emit('data-b', this.age);
      }
    }
}
var C = {
    template: '#c',
    data() {
      return {
        name: '',
        age: ""
      }
    },
    mounted() {
     Event.$on('data-a',( name )=> {
         this.name = name;
     })
     Event.$on('data-b',(age )=> {
         this.age = age;
     })
    }
}
var vm = new Vue({
    el: '#itany',
    components: {
      'my-a': A,
      'my-b': B,
      'my-c': C
    }
}); 
</script>

5、attrs/listeners(用于多級(jí)組件嵌套需要傳遞數(shù)據(jù)時(shí)，僅僅是傳遞數(shù)據(jù)，而不做中間處理可以使用，只讀取非props定義的數(shù)據(jù)，)https://www.cnblogs.com/shaozhu520/p/10926647.html；
isteners(用于多級(jí)組件嵌中跨級(jí)調(diào)用方法，子級(jí)、夫級(jí) 、爺級(jí)，比如,子級(jí)調(diào)用爺爺級(jí)的方法)https://blog.csdn.net/qq_42540989/article/details/102936853?utm_term=listeners%E4%BD%BF%E7%94%A8vue&utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2
多級(jí)組件嵌套需要傳遞數(shù)據(jù)時(shí)，通常使用的方法是通過vuex。但如果僅僅是傳遞數(shù)據(jù)，而不做中間處理，使用 vuex 處理，未免有點(diǎn)大材小用。
兩者都是跨級(jí)通訊，
6、provide/inject(允許子子孫孫組件讀取最高級(jí)組件的數(shù)據(jù)，provide與inject 可以實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式)

$parent 和$ children與 ref(這兩種方法的弊端是，無法在跨級(jí)或兄弟間通信)

8、插槽不知道是不是，也可以傳參。

插槽

一、插槽的作用
組件最大的特點(diǎn)就是復(fù)用性，抽取共性的部分，不同的部分由使用者提供
使用者可以決定組件內(nèi)部的內(nèi)容。
方式1：基本使用,匿名插槽

<div id="app">
 <!-- 調(diào)用組件 --> 
   <cld>
       插槽內(nèi)容 插槽內(nèi)可以包含任何模板代碼，包括 HTML:甚至其它的組件
   </cld>
</div>
<!-- 組件內(nèi)容 --> 
<template id="child">
 <div>
  子組件內(nèi)容
  <slot></slot>顯示"插槽內(nèi)容"
 </div>
</template>

方式2：添加默認(rèn)值
給插槽內(nèi)添加默認(rèn)值，使用組件時(shí)，插槽沒有填入內(nèi)容就會(huì)展示默認(rèn)內(nèi)容，如果使用組件時(shí)傳入插槽內(nèi)容，就會(huì)展示對(duì)應(yīng)的內(nèi)容。

<div id="app">
   <!-- 調(diào)用組件 --> 
   <cld>
     插槽內(nèi)容 插槽內(nèi)可以包含任何模板代碼，包括 HTML:甚至其它的組件
   </cld>
</div>
<!-- 組件內(nèi)容 --> 
<template id="child">
   <div>
      子組件內(nèi)容
      <slot>默認(rèn)內(nèi)容</slot> //默認(rèn)內(nèi)容是插槽后備內(nèi)容，當(dāng)父級(jí)組件中使用 <cld> 并且不提供任何插槽內(nèi)容時(shí)啟用插槽內(nèi)容，有則覆蓋后背內(nèi)容
   </div>
</template>

此時(shí)頁面展示默認(rèn)內(nèi)容。
但是調(diào)用組件組件標(biāo)簽有東西，會(huì)覆蓋默認(rèn)插槽內(nèi)容，如：

<div id="app">
   <!-- 調(diào)用組件 --> 
   <cld>
       傳入插槽內(nèi)容
  </cld>
</div>

<!-- 組件內(nèi)容 --> 
<template id="child">
   <div>
    子組件內(nèi)容
      <slot>默認(rèn)內(nèi)容</slot>  
   </div>
</template>

此時(shí)頁面展示傳入插槽內(nèi)容
方式3：具名插槽-slot 插槽必須綁定 name 屬性。
具名插槽就是有具體名字的插槽，基本用法為：
使用組件時(shí)，插槽內(nèi)容需要添加slot屬性。
通過slot屬性來指定，這個(gè)slot的值必須和下面的slot組件的name值對(duì)應(yīng)上，現(xiàn)在 <h2> 元素中的內(nèi)容都將會(huì)被傳入對(duì)應(yīng)的具名插槽。任何沒有被包裹再帶有 v-slot 的內(nèi)容都會(huì)被視為默認(rèn)插槽的內(nèi)容,插入默認(rèn)插槽(<slot>默認(rèn)內(nèi)容</slot> )。

<!-- 組件調(diào)用 -->
<div id="app">
 <cld>
  <!--匿名插槽-->
 <div>  沒有插槽內(nèi)容</div>
 <span v-slot:default> 沒有插槽內(nèi)容</span>
 <template v-slot="title">//v-slot="title"這個(gè)會(huì)當(dāng)成默認(rèn)作用域 等同于 v-slot:default="title，以前是具名插槽的寫法
     <div>title</div>
 </template>
  <!--這仨個(gè)都一樣都是默認(rèn)插槽，只能保留一個(gè)--
  <!--具名插槽 縮寫#title-->
  <h2 v-slot:title>標(biāo)題</h2> 
 </cld>
</div>

<!-- 子組件內(nèi)容 -->
<template id="child">
 <div>
  <slot name="title"></slot> 
  子組件內(nèi)容
  <slot>默認(rèn)內(nèi)容</slot>  
 </div>
</template>

三、作用域插槽
我們經(jīng)常通過父組件給子組件傳遞展示內(nèi)容，但是作用域插槽剛好相反，把數(shù)據(jù)從子組件傳來，父組件通過v-slot:default="slotProps"或者v-slot="slotProps"接收匿名插槽數(shù)據(jù)；v-slot:other="otherSlotProps"接收具名插槽數(shù)據(jù)。

//注意默認(rèn)插槽的縮寫語法不能和具名插槽混用，因?yàn)樗鼤?huì)導(dǎo)致作用域不明確
<!-- 父組件使用  -->
<cld >
    <!--slotProps可以自定義-->
    <!--匿名插槽-->
    <template v-slot="slotProps"> 
         <div>
           獲取數(shù)據(jù)匿名插槽數(shù)據(jù)
           {{slotProps.data[0]}}
       </div>
    </template >
    <template v-slot:default="slotProps">
         <div>
           獲取數(shù)據(jù)匿名插槽數(shù)據(jù)
           {{slotProps.data[0]}}
       </div>
    </template >
   <!--具名插槽other和otherSlotProps可以自定義-->
    <template v-slot:other="otherSlotProps">
       <div  >
         獲取具名插槽數(shù)據(jù)
         <li v-for="item in otherSlotProps.data">{{item}}</li>
       </div>
   </template> 
</cld>

<!-- 子組件內(nèi)容 -->
<template id="child" >
 <div>
    <slot name="other" :data="color"></slot> 
    <slot  :data="name"></slot> 
 </div>
</template>
<script>
export default{
 data(){
  return{
    color:['red','oranage','yellow','green'],
    name:[6],
   }
  }
}
</script>

在 2.6.0 中，我們?yōu)榫呙宀酆妥饔糜虿宀垡肓艘粋€(gè)新的統(tǒng)一的語法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 這兩個(gè)目前已被廢棄
https://cn.vuejs.org/v2/guide/components-slots.html#%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD

 slot="" == v-slot = ""
 //默認(rèn)插槽：
 <span v-slot:default> 沒有插槽內(nèi)容</span>//default說明是默認(rèn)插槽，組件標(biāo)簽里的內(nèi)容不使用v-slot也是默認(rèn)插槽
 slot-scope="slotProps" == v-slot="slotProps" == v-slot:default="slotProps"

pinia
vuex:http://m.itdecent.cn/p/a86431e88010

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Vue組件通信的方式有哪些?

Vue組件通信的方式有哪些?

插槽

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Vue組件通信的方式有哪些?

插槽

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av