vue通過 emit傳值的方式實現簡單的搜尋功能

1、首先先專案中建立乙個檔案，該檔案隨便起名sousuo.vue

html**：

"sousuo"
>
="t-sousuo" @keyup.enter=
"searchcont"
>
="el-icon-search"
>
<
/i>
="t-sousuo-xiao"
>
"text" placeholder=
"請輸入內容" ref=
"input" v-model=
"search"
>
<
/div>
"searchcont" type=
"primary"
>搜尋<
/el-button>
<
/div>
<
/div>
<
/template>

在bus.vue檔案裡面寫這兩句話：

import vue from

'vue'
;export
default
newvue()
;

import bus from

'./assets/bus'
vue.prototype.$bus = bus

export
default},
methods:},
mounted()
}<
/script>

html部分：v-for遍歷listsearch陣列，獲取資料，以下只是個列子，具體看自己的專案要求

"conter"
>
="content" v-
for=
"(item,index) in listsearch"
:key=
"index"
>
}<
/div>
<
/div>
<
/template>

export
default,,
,],// 這個陣列是從後台獲取過來的資料
listsearch:[,
,,]// 這個陣列也是從後台獲取過來的資料，並且輸入搜尋內容的時候更新遍歷到html上}}
,created()
);})
}}<
/script>

Vue傳值方式

1.provide和inject實現祖先與後代元件傳值 祖先元件 export default provide 後代元件 export default 2.props實現父向子傳值 父元件 zhnagsan age 2 子元件 export default 3.emit實現子元件傳資料給父元件 子元...

Vue傳值方式

父傳子 1.1父元件準備資料 1.2給子元件註冊定義屬性 1.3子元件用props接收資料 注意 這裡我監聽了 父元件的值 子傳父 2.1 子元件準備資料 this.cstcde和thi.danme已經在子元件data中定義好了 2.2 子元件需要觸發自定義事件,觸發事件傳遞引數 confirm就是...

vue 傳值的幾種方式

1.父子傳值 第一步 在父元素中繫結乙個引數 我這裡的是 id updateid 第二步 在子元素中接受，使用props接收。2.子向父傳值 第一步 在子元件中觸發 我這裡並沒有傳值，如果需要傳值，就 self.emit updates 你要傳的值 第二步 在父元素監聽事件 傳參的直接在update...