整合營銷服務商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          Vue組件間通信方法整理(實戰(zhàn)必備)

          Vue組件間通信方法整理(實戰(zhàn)必備)

          組件是 vue.js最強大的功能之一,而組件實例的作用域是相互獨立的,這就意味著不同組件之間的數(shù)據(jù)無法相互引用。一般來說,組件可以有以下幾種關(guān)系:

          如上圖所示,A 和 B、B 和 C、B 和 D 都是父子關(guān)系,C 和 D 是兄弟關(guān)系,A 和 C 是隔代關(guān)系(可能隔多代)。

          針對不同的使用場景,如何選擇行之有效的通信方式?這是我們所要探討的主題。本文總結(jié)了vue組件間通信的幾種方式,如props、$emit/$on、vuex、$parent / $children、$attrs/$listeners和provide/inject,以通俗易懂的實例講述這其中的差別及使用場景,希望對小伙伴有些許幫助。

          方法一、props/$emit

          父組件A通過props的方式向子組件B傳遞,B to A 通過在 B 組件中 $emit, A 組件中 v-on 的方式實現(xiàn)。

          1.父組件向子組件傳值

          接下來我們通過一個例子,說明父組件如何向子組件傳遞值:在子組件Users.vue中如何獲取父組件App.vue中的數(shù)據(jù) users:["Henry","Bucky","Emily"]

          //App.vue父組件
          <template>
           <div id="app">
           <users v-bind:users="users"></users>//前者自定義名稱便于子組件調(diào)用,后者要傳遞數(shù)據(jù)名
           </div>
          </template>
          <script>
          import Users from "./components/Users"
          export default {
           name: 'App',
           data(){
           return{
           users:["Henry","Bucky","Emily"]
           }
           },
           components:{
           "users":Users
           }
          }
          
          
          //users子組件
          <template>
           <div class="hello">
           <ul>
           <li v-for="user in users">{{user}}</li>//遍歷傳遞過來的值,然后呈現(xiàn)到頁面
           </ul>
           </div>
          </template>
          <script>
          export default {
           name: 'HelloWorld',
           props:{
           users:{ //這個就是父組件中子標簽自定義名字
           type:Array,
           required:true
           }
           }
          }
          </script>
          

          總結(jié):父組件通過props向下傳遞數(shù)據(jù)給子組件。注:組件中的數(shù)據(jù)共有三種形式:data、props、computed

          2.子組件向父組件傳值(通過事件形式)

          接下來我們通過一個例子,說明子組件如何向父組件傳遞值:當我們點擊“Vue.js Demo”后,子組件向父組件傳遞值,文字由原來的“傳遞的是一個值”變成“子向父組件傳值”,實現(xiàn)子組件向父組件值的傳遞。

          // 子組件
          <template>
           <header>
           <h1 @click="changeTitle">{{title}}</h1>//綁定一個點擊事件
           </header>
          </template>
          <script>
          export default {
           name: 'app-header',
           data() {
           return {
           title:"Vue.js Demo"
           }
           },
           methods:{
           changeTitle() {
           this.$emit("titleChanged","子向父組件傳值");
           //自定義事件 傳遞值“子向父組件傳值”
           }
           }
          }
          </script>
          
          
          // 父組件
          <template>
           <div id="app">
           <app-header v-on:titleChanged="updateTitle" ></app-header>
           //與子組件titleChanged自定義事件保持一致
           // updateTitle($event)接受傳遞過來的文字
           <h2>{{title}}</h2>
           </div>
          </template>
          <script>
          import Header from "./components/Header"
          export default {
           name: 'App',
           data(){
           return{
           title:"傳遞的是一個值"
           }
           },
           methods:{
           updateTitle(e){ //聲明這個函數(shù)
           this.title=e;
           }
           },
           components:{
           "app-header":Header,
           }
          }
          </script>
          

          總結(jié):子組件通過events給父組件發(fā)送消息,實際上就是子組件把自己的數(shù)據(jù)發(fā)送到父組件。

          方法二、$emit/$on

          這種方法通過一個空的Vue實例作為中央事件總線(事件中心),用它來觸發(fā)事件和監(jiān)聽事件,巧妙而輕量地實現(xiàn)了任何組件間的通信,包括父子、兄弟、跨級。當我們的項目比較大時,可以選擇更好的狀態(tài)管理解決方案vuex。

          1.具體實現(xiàn)方式:

           var Event=new Vue();
           Event.$emit(事件名,數(shù)據(jù));
           Event.$on(事件名,data=> {});
          

          2.舉個例子

          假設(shè)兄弟組件有三個,分別是A、B、C組件,C組件如何獲取A或者B組件的數(shù)據(jù)

          <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();//定義一個空的Vue實例
          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() {
           //在模板編譯完成后執(zhí)行
          	 Event.$on('data-a',name=> {
          	 this.name=name;
           //箭頭函數(shù)內(nèi)部不會產(chǎn)生新的this,這邊如果不用=>,this指代Event
          	 })
          	 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>
          

          $on 監(jiān)聽了自定義事件 data-a和data-b,因為有時不確定何時會觸發(fā)事件,一般會在 mounted 或 created 鉤子中來監(jiān)聽。

          方法三、vuex

          1.簡要介紹Vuex原理

          Vuex實現(xiàn)了一個單向數(shù)據(jù)流,在全局擁有一個State存放數(shù)據(jù),當組件要更改State中的數(shù)據(jù)時,必須通過Mutation進行,Mutation同時提供了訂閱者模式供外部插件調(diào)用獲取State數(shù)據(jù)的更新。而當所有異步操作(常見于調(diào)用后端接口異步獲取更新數(shù)據(jù))或批量的同步操作需要走Action,但Action也是無法直接修改State的,還是需要通過Mutation來修改State的數(shù)據(jù)。最后,根據(jù)State的變化,渲染到視圖上。

          2.簡要介紹各模塊在流程中的功能

          • Vue Components:Vue組件。HTML頁面上,負責接收用戶操作等交互行為,執(zhí)行dispatch方法觸發(fā)對應action進行回應。
          • dispatch:操作行為觸發(fā)方法,是唯一能執(zhí)行action的方法。
          • actions:操作行為處理模塊,由組件中的$store.dispatch('action 名稱', data1)來觸發(fā)。然后由commit()來觸發(fā)mutation的調(diào)用 , 間接更新 state。負責處理Vue Components接收到的所有交互行為。包含同步/異步操作,支持多個同名方法,按照注冊的順序依次觸發(fā)。向后臺API請求的操作就在這個模塊中進行,包括觸發(fā)其他action以及提交mutation的操作。該模塊提供了Promise的封裝,以支持action的鏈式觸發(fā)。
          • commit:狀態(tài)改變提交操作方法。對mutation進行提交,是唯一能執(zhí)行mutation的方法。
          • mutations:狀態(tài)改變操作方法,由actions中的commit('mutation 名稱')來觸發(fā)。是Vuex修改state的唯一推薦方法。該方法只能進行同步操作,且方法名只能全局唯一。操作之中會有一些hook暴露出來,以進行state的監(jiān)控等。
          • state:頁面狀態(tài)管理容器對象。集中存儲Vue components中data對象的零散數(shù)據(jù),全局唯一,以進行統(tǒng)一的狀態(tài)管理。頁面顯示所需的數(shù)據(jù)從該對象中進行讀取,利用Vue的細粒度數(shù)據(jù)響應機制來進行高效的狀態(tài)更新。
          • getters:state對象讀取方法。圖中沒有單獨列出該模塊,應該被包含在了render中,Vue Components通過該方法讀取全局state對象。

          3.Vuex與localStorage

          vuex 是 vue 的狀態(tài)管理器,存儲的數(shù)據(jù)是響應式的。但是并不會保存起來,刷新之后就回到了初始狀態(tài),具體做法應該在vuex里數(shù)據(jù)改變的時候把數(shù)據(jù)拷貝一份保存到localStorage里面,刷新之后,如果localStorage里有保存的數(shù)據(jù),取出來再替換store里的state。

          let defaultCity="上海"
          try { // 用戶關(guān)閉了本地存儲功能,此時在外層加個try...catch
           if (!defaultCity){
           defaultCity=JSON.parse(window.localStorage.getItem('defaultCity'))
           }
          }catch(e){}
          export default new Vuex.Store({
           state: {
           city: defaultCity
           },
           mutations: {
           changeCity(state, city) {
           state.city=city
           try {
           window.localStorage.setItem('defaultCity', JSON.stringify(state.city));
           // 數(shù)據(jù)改變的時候把數(shù)據(jù)拷貝一份保存到localStorage里面
           } catch (e) {}
           }
           }
          })
          

          這里需要注意的是:由于vuex里,我們保存的狀態(tài),都是數(shù)組,而localStorage只支持字符串,所以需要用JSON轉(zhuǎn)換:

          JSON.stringify(state.subscribeList); // array -> string
          JSON.parse(window.localStorage.getItem("subscribeList")); // string -> array 
          

          方法四、$attrs/$listeners

          1.簡介

          多級組件嵌套需要傳遞數(shù)據(jù)時,通常使用的方法是通過vuex。但如果僅僅是傳遞數(shù)據(jù),而不做中間處理,使用 vuex 處理,未免有點大材小用。為此Vue2.4 版本提供了另一種方法----$attrs/$listeners

          • $attrs:包含了父作用域中不被 prop 所識別 (且獲取) 的特性綁定 (class 和 style 除外)。當一個組件沒有聲明任何 prop 時,這里會包含所有父作用域的綁定 (class 和 style 除外),并且可以通過 v-bind="$attrs" 傳入內(nèi)部組件。通常配合 interitAttrs 選項一起使用。
          • $listeners:包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽器。它可以通過 v-on="$listeners" 傳入內(nèi)部組件

          接下來我們看個跨級通信的例子:

          // index.vue
          <template>
           <div>
           <h2>浪里行舟</h2>
           <child-com1
           :foo="foo"
           :boo="boo"
           :coo="coo"
           :doo="doo"
           title="前端工匠"
           ></child-com1>
           </div>
          </template>
          <script>
          const childCom1=()=> import("./childCom1.vue");
          export default {
           components: { childCom1 },
           data() {
           return {
           foo: "Javascript",
           boo: "Html",
           coo: "CSS",
           doo: "Vue"
           };
           }
          };
          </script>
          
          
          // childCom1.vue
          <template class="border">
           <div>
           <p>foo: {{ foo }}</p>
           <p>childCom1的$attrs: {{ $attrs }}</p>
           <child-com2 v-bind="$attrs"></child-com2>
           </div>
          </template>
          <script>
          const childCom2=()=> import("./childCom2.vue");
          export default {
           components: {
           childCom2
           },
           inheritAttrs: false, // 可以關(guān)閉自動掛載到組件根元素上的沒有在props聲明的屬性
           props: {
           foo: String // foo作為props屬性綁定
           },
           created() {
           console.log(this.$attrs); // { "boo": "Html", "coo": "CSS", "doo": "Vue", "title": "前端工匠" }
           }
          };
          </script>
          
          
          // childCom2.vue
          <template>
           <div class="border">
           <p>boo: {{ boo }}</p>
           <p>childCom2: {{ $attrs }}</p>
           <child-com3 v-bind="$attrs"></child-com3>
           </div>
          </template>
          <script>
          const childCom3=()=> import("./childCom3.vue");
          export default {
           components: {
           childCom3
           },
           inheritAttrs: false,
           props: {
           boo: String
           },
           created() {
           console.log(this.$attrs); // { "boo": "Html", "coo": "CSS", "doo": "Vue", "title": "前端工匠" }
           }
          };
          </script>
          
          
          // childCom3.vue
          <template>
           <div class="border">
           <p>childCom3: {{ $attrs }}</p>
           </div>
          </template>
          <script>
          export default {
           props: {
           coo: String,
           title: String
           }
          };
          </script>
          

          如上圖所示$attrs表示沒有繼承數(shù)據(jù)的對象,格式為{屬性名:屬性值}。Vue2.4提供了$attrs , $listeners 來傳遞數(shù)據(jù)與事件,跨級組件之間的通訊變得更簡單。簡單來說:$attrs與$listeners 是兩個對象,$attrs 里存放的是父組件中綁定的非 Props 屬性,$listeners里存放的是父組件中綁定的非原生事件。

          方法五、provide/inject

          1.簡介

          Vue2.2.0新增API,這對選項需要一起使用,以允許一個祖先組件向其所有子孫后代注入一個依賴,不論組件層次有多深,并在起上下游關(guān)系成立的時間里始終生效。一言而蔽之:祖先組件中通過provider來提供變量,然后在子孫組件中通過inject來注入變量。 provide / inject API 主要解決了跨級組件間的通信問題,不過它的使用場景,主要是子組件獲取上級組件的狀態(tài),跨級組件間建立了一種主動提供與依賴注入的關(guān)系

          2.舉個例子

          假設(shè)有兩個組件: A.vue 和 B.vue,B 是 A 的子組件

          // A.vue
          export default {
           provide: {
           name: '浪里行舟'
           }
          }
          
          // B.vue
          export default {
           inject: ['name'],
           mounted () {
           console.log(this.name); // 浪里行舟
           }
          }
          

          可以看到,在 A.vue 里,我們設(shè)置了一個 provide: name,值為 浪里行舟,它的作用就是將 name 這個變量提供給它的所有子組件。而在 B.vue 中,通過 inject 注入了從 A 組件中提供的 name 變量,那么在組件 B 中,就可以直接通過 this.name 訪問這個變量了,它的值也是浪里行舟。這就是 provide / inject API 最核心的用法。

          需要注意的是:provide 和 inject 綁定并不是可響應的。這是刻意為之的。然而,如果你傳入了一個可監(jiān)聽的對象,那么其對象的屬性還是可響應的----vue官方文檔 所以,上面 A.vue 的 name 如果改變了,B.vue 的 this.name 是不會改變的,仍然是 浪里行舟。

          3.provide與inject 怎么實現(xiàn)數(shù)據(jù)響應式

          一般來說,有兩種辦法:

          • provide祖先組件的實例,然后在子孫組件中注入依賴,這樣就可以在子孫組件中直接修改祖先組件的實例的屬性,不過這種方法有個缺點就是這個實例上掛載很多沒有必要的東西比如props,methods
          • 使用2.6最新API Vue.observable 優(yōu)化響應式 provide(推薦)

          我們來看個例子:孫組件D、E和F獲取A組件傳遞過來的color值,并能實現(xiàn)數(shù)據(jù)響應式變化,即A組件的color變化后,組件D、E、F不會跟著變(核心代碼如下:)

          // A 組件 
          <div>
           <h1>A 組件</h1>
           <button @click="()=> changeColor()">改變color</button>
           <ChildrenB />
           <ChildrenC />
          </div>
          ......
           data() {
           return {
           color: "blue"
           };
           },
           // provide() {
           // return {
           // theme: {
           // color: this.color //這種方式綁定的數(shù)據(jù)并不是可響應的
           // } // 即A組件的color變化后,組件D、E、F不會跟著變
           // };
           // },
           provide() {
           return {
           theme: this//方法一:提供祖先組件的實例
           };
           },
           methods: {
           changeColor(color) {
           if (color) {
           this.color=color;
           } else {
           this.color=this.color==="blue" ? "red" : "blue";
           }
           }
           }
           // 方法二:使用2.6最新API Vue.observable 優(yōu)化響應式 provide
           // provide() {
           // this.theme=Vue.observable({
           // color: "blue"
           // });
           // return {
           // theme: this.theme
           // };
           // },
           // methods: {
           // changeColor(color) {
           // if (color) {
           // this.theme.color=color;
           // } else {
           // this.theme.color=this.theme.color==="blue" ? "red" : "blue";
           // }
           // }
           // }
          
          
          // F 組件 
          <template functional>
           <div class="border2">
           <h3 :style="{ color: injections.theme.color }">F 組件</h3>
           </div>
          </template>
          <script>
          export default {
           inject: {
           theme: {
           //函數(shù)式組件取值不一樣
           default: ()=> ({})
           }
           }
          };
          </script>
          

          雖說provide 和 inject 主要為高階插件/組件庫提供用例,但如果你能在業(yè)務中熟練運用,可以達到事半功倍的效果!

          方法六、$parent / $children與 ref

          • ref:如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子組件上,引用就指向組件實例
          • $parent / $children:訪問父 / 子實例

          需要注意的是:這兩種都是直接得到組件實例,使用后可以直接調(diào)用組件的方法或訪問數(shù)據(jù)。我們先來看個用 ref來訪問組件的例子:

          // component-a 子組件
          export default {
           data () {
           return {
           title: 'Vue.js'
           }
           },
           methods: {
           sayHello () {
           window.alert('Hello');
           }
           }
          }
          
          // 父組件
          <template>
           <component-a ref="comA"></component-a>
          </template>
          <script>
           export default {
           mounted () {
           const comA=this.$refs.comA;
           console.log(comA.title); // Vue.js
           comA.sayHello(); // 彈窗
           }
           }
          </script>
          

          不過,這兩種方法的弊端是,無法在跨級或兄弟間通信

          // parent.vue
          <component-a></component-a>
          <component-b></component-b>
          <component-b></component-b>
          

          我們想在 component-a 中,訪問到引用它的頁面中(這里就是 parent.vue)的兩個 component-b 組件,那這種情況下,就得配置額外的插件或工具了,比如 Vuex 和 Bus 的解決方案。

          總結(jié)

          常見使用場景可以分為三類:

          • 父子通信: 父向子傳遞數(shù)據(jù)是通過 props,子向父是通過 events($emit);通過父鏈 / 子鏈也可以通信($parent / $children);ref 也可以訪問組件實例;provide / inject API;$attrs/$listeners
          • 兄弟通信: Bus;Vuex
          • 跨級通信: Bus;Vuex;provide / inject API、$attrs/$listeners

          們在開發(fā)項目時候經(jīng)常會遇到這樣的需求,提供一個可選擇的下拉框,下拉列表中提供了常見的選項。當所提供選項選項無法滿足用戶需求時用戶可以自行輸入所需參數(shù)。為了滿足大部分的用戶需求我們可以封裝一個通用組件來滿足多種需求,當調(diào)用的組件的時候配置好參數(shù)就可以快速實現(xiàn)所需功能了。

          圖來自“互聯(lián)網(wǎng)”

          ?組件實現(xiàn)的功能:

          1,可定義組件寬度,下拉寬度與組件寬度一致;類型number,默認值100;

          2,可定義后綴,默認為空;

          3,可定義是否只讀,默認為false;

          4,可定義下拉列表選項,類型數(shù)組,默認為空;

          5,可定義輸入框中值顯示位置,分別為居左、居中、居右;分隊對應的可輸入值為left、center、right,默認居中即center。

          6,可定義下拉按鈕顯示,類型布爾值,默認為true(顯示)。

          定義模板

          這里利用了element中的popover彈出框組件中嵌套下拉列表來實現(xiàn)下拉選項,當選擇下拉選項中的值時將該值賦值給input框中的綁定值。而input框主要使用了些動態(tài)樣式并監(jiān)聽了鼠標獲取焦點、鍵盤輸入、鍵盤刪除、鼠標失去焦點等觸發(fā)事件 ,來實時改變輸入框中顯示的值。

          定義CSS樣式

          這里我用的是scss預處理器,在修改popover組件樣式時我們用到了深度作用選擇器::v-deep,具體的可以參考文章Vue實戰(zhàn)072:CSS樣式中的各種深度作用選擇器的使用,這里需要注意的是控制彈出框與input框的寬度一致,在popover組件上添加一個樣式獲取上級組件的寬度以達到控制彈出窗父級組件的寬度,這樣popover中就可以獲取到父級組件的寬度,再通過深度作用選擇器來定位組件中的DOM元素并進行修改即可。

          定義功能邏輯

          props中是留給用戶調(diào)用組件時配置的參數(shù)值,前面文章Vue實戰(zhàn)071:Element實現(xiàn)WEB顏色選擇器功能中有提到過prop傳遞過來的值都是單向下行綁定,子組件不能修改由父組件傳遞過來的值。所以這里我們同樣定義一個變量來接受父級傳遞過來的值,然后通過計算屬性拼接后綴顯示。當選擇下拉選項中的值時將該值在復制給變量,同時監(jiān)聽顯示值的變化并通過this.$emit將該值傳遞給父級組件。

          組件調(diào)用

          組件中只有下拉列表必須提供數(shù)據(jù)的,其他參數(shù)都定義了默認值所以可選填。這樣用戶就可以非常靈活的使用該組件了,也大大提高了組件的可使用范圍。這里沒看到組件引入是因為我對組件進行了全局自動化注冊,可以參考文章Vue實戰(zhàn)070:組件的局部注冊和全局注冊(含自動化注冊)功能實現(xiàn)。

          總結(jié):

          以上內(nèi)容是小編給大家分享的Vue實戰(zhàn)073:可輸入的下拉框組件功能實現(xiàn),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。更多Vue實戰(zhàn)技巧可以參考專欄:Vue實戰(zhàn)系列,在此也非常感謝大家對小編的支持!

          項目中,我們有時需要封裝一些組件,為了高內(nèi)聚,我們有時可以把文件都寫法一個js文件中。vite官方給我們提供了jsx寫法插件 @vitejs/plugin-vue-jsx,并且可以隨便找個css in js 庫,這里我用@styils/vue

          使用插件步驟:

          npm i @vitejs/plugin-vue-jsx 
          npm i @styils/vue
          //vite.config.js
          // 引入jsx官方插件
          import vueJsx from '@vitejs/plugin-vue-jsx'
          export default defineConfig({
            plugins: [
              //更多配置看github
            	vueJsx({
                include:/\.[jt]s$/ 
              })
            ]
          })

          示例:

          // App.vue
          <template>
            <div>
              <el-button @click="Alerst" type="primary">彈框</el-button>
            </div>
          </template>
          <script setup>
          import { alert } from './utils/Alert'
          const messageProp='彈出框數(shù)據(jù)'
          const Alerst=()=> {
            alert(messageProp)
          }
          </script>
          // src/utils/Alert/index.js
          import { render } from 'vue'
          import { styled } from '@styils/vue';
          export const alert=(propsData)=> {
            //創(chuàng)建一個有樣式div
            const Mydiv=styled('div', {
              position: "fixed",
              top: '50%',
              left: '50%',
              transform: 'translate(-50%,-50%)',
            })
              const container=document.createElement('div')
              document.body.appendChild(container)
              const VNode=(
                <Mydiv>   //替換原來沒有樣式的<div>
                  <h1>登錄成功</h1>
                    <p>{propsData}</p>
                    <button onClick={()=> {  
                      container.remove();  
                    }}>關(guān)閉</button>
                </Mydiv> 
              )
            render(VNode, container)
          }

          效果


          主站蜘蛛池模板: 精品一区高潮喷吹在线播放| 一区二区三区四区精品视频| 少妇精品无码一区二区三区| 国产一区风间由美在线观看| 无码人妻精品一区二区蜜桃网站 | 国内精品视频一区二区三区| 亚洲AV无码一区二区乱孑伦AS | 精品人伦一区二区三区潘金莲| 国产精品毛片一区二区| 在线日韩麻豆一区| 日本国产一区二区三区在线观看 | 免费在线视频一区| 韩国一区二区三区| 国产精品久久久久久一区二区三区| 国产精品一区视频| 精品人妻AV一区二区三区 | 久久一区二区三区99| 欲色影视天天一区二区三区色香欲| 国产精品一区二区无线| 国产伦精品一区三区视频| 冲田杏梨AV一区二区三区| 日韩一区二区在线免费观看| 国产成人久久一区二区三区| 国产精品日韩一区二区三区| 日本无卡码免费一区二区三区| 韩国资源视频一区二区三区| 波多野结衣精品一区二区三区| 午夜肉伦伦影院久久精品免费看国产一区二区三区 | 久久精品视频一区| 国产AV午夜精品一区二区三区| 无码日韩精品一区二区三区免费| 精品乱人伦一区二区三区| 久久久久人妻精品一区蜜桃| 精品不卡一区二区| 日本精品视频一区二区三区| 国产精品毛片a∨一区二区三区 | 国产日韩AV免费无码一区二区| 红桃AV一区二区三区在线无码AV| 亚洲AV日韩AV天堂一区二区三区| 日韩一区二区在线播放| 精品不卡一区中文字幕|