vue雜談 自定義元件通訊之子元件向父元件傳值

2021-09-23 14:09:07 字數 514 閱讀 7608

上一節我們看來父元件使用props屬性向子元件傳值,這一節我們看下子元件如何向父元件通訊傳值

子元件主要使用this.$emit方法和父元件通訊,

下面的示例演示了子元件向父元件傳值

首先子元件中定義單機事件,

vue.component('todo-item', }',

methods:

} })

然後在元件中監聽事件,使用v-on監聽子元件事件

然後在父元件中處理監聽邏輯,這裡處理邏輯在deleventone中

data: ,

methods:

}})

完整**

v-bind:index="index"  v-bind:count="item" :key="index"

v-on:delevent="deleventone"

>

自定義元件,元件通訊

在專案開發時,採用元件化得思想開發,搭建專案時,src下有views目錄,一般放頁面級元件,在建立乙個comment目錄來放公共元件,比如頭部元件和底部元件,然後在建立乙個feature目錄來放功能元件,比如輪播元件,上拉載入更多元件,搜尋元件,tabbar元件等,元件提公升專案得開發效率,解決了傳...

Vue 自定義元件

元件 component 是vue.js 最強大的功能。元件可以封裝可重用的 通過傳入物件的不同,實現元件的復用,但元件傳值就成為乙個需要解決的問題。父元件向子元件傳值 元件例項的作用域是孤立的。這意味著不能在子元件的模板內直接引用父元件的資料。要讓子元件使用父元件的資料,我們需要通過子元件的 pr...

Vue 自定義元件

元件 component 是 vue.js 最強大的功能之一。元件可以擴充套件 html 元素,封裝可重用的 在較高層面上,元件是自定義元素,vue.js 的編譯器為它新增特殊功能。在有些情況下,元件也可以表現為用is 特性進行了擴充套件的原生 html 元素。所有的 vue 元件同時也都是 vue...