Vue中不是父元件和子元件之間的通訊有哪些方式

2021-09-19 03:33:47 字數 770 閱讀 7400

非父子子元件一般有兩種,兄弟元件和跨多級元件。

第一種:使用乙個空的vue例項作為**事件匯流排

var bus = new vue();//首先建立名為bus為空的vue例項。

bus.$emit('on-message','來自元件my-compoennt的內容'); //通bus把事件on-message發出去

bus.$on('on-message',function(msg)) //在生命週期mounted鉤子函式裡監聽來自bus的事件on-message

第二種:使用this.$parent可以直接訪問該元件的父例項或者元件父元件

this.$parent.message = '來自元件mycomponent的內容';
第三種:用特殊的屬性ref來為子元件指定乙個索引名稱

//特殊的ref屬性指定索引名

var msg = this.$refs.coma.message; //通$ref來訪問指定的例項

vue元件,父元件與子元件之間通訊

vue元件,元件是乙個可復用的功能模組,即將具有相同功能的模組抽取成乙個元件,在需要的地方引用即可,這體現了 封裝的思想,下面看一下元件是如何實現 定義乙個名為 button counter 的新元件 vue.component button counter template you clicked...

Vue中父元件與子元件之間的通訊

prop 父元件向子元件傳遞資料,單向繫結 refs 父元件呼叫子元件裡的屬性和方法 emit 子元件向父元件傳遞訊息 新建專案 vue create demo cd demo npm run servecomponents child.vue 子元件h2 template 父元件h2 child ...

vue中父元件呼叫子元件

在vue中父元件操作子元件通常會用ref這個特性,結合文件我們來看下ref有哪些用法 官方定義 ref被用來給元素或者子元件註冊引用資訊。換句話講就是vue留了乙個操作原生dom元素或操作子元件例項的介面 當ref定義在元素或元件上,元素或元件資訊會被註冊在例項中的 refs物件上。1 操作單個do...