Vue使用的擴充套件

2022-06-13 16:36:17 字數 3078 閱讀 6741

vue2.0提供了vuex進行非父子元件之間的通訊,但在簡單的場景下,可以使用乙個空的vue例項作為**事件匯流排。

實現**示例:

<

div

id>

<

c1>

c1>

<

c2>

c2>

div>

var bus = new vue();   //

為了方便將bus(空vue)定義在乙個元件中,在實際的運用中一般會新建一bus.js

vue.component('c1',}

', data: () =>(),

created() );

}});

vue.component('c2',

}});

vue(

},methods: ,

}

//

元件2import bus from './bus'export

default

},mounted () );

}

}

但這種引入方式,經過webpack打包後可能會出現bus區域性作用域的情況,即引用的是兩個不同的bus,導致不能正常通訊

(1)直接將bus注入到vue根物件中

import vue from 'vue'const bus = new

vue()

vue(  

})

在子元件中通過this.$root.bus.$on()、this.$root.bus.$emit()來呼叫

vue.prototype.bus = new vue();

每個元件都是乙個vue示例,所以每個元件都會有bus屬性,在元件中可以通過 this.bus.$emit、this.bus.$on 來呼叫

vue.component('c2',

}});

參考:**示例:

新增a元件

新增b元件

for="item in items">

js: ....

})

new

vue(

})

語法糖是指用另一種語法替換原先的比較複雜的語法,但實現的功能一樣,這種比較簡單清晰的語法被稱為語法糖。

vue 中的語法糖有:

v-bind 的語法糖是:":"

v-on 的語法糖是:"@"

v-model 也是乙個語法糖,v-model = "test" 的實際寫法可以寫成 :value = "test" @input = " test =  $event.target.value " 

v-slot 的語法糖是:"#",該縮寫只有在有引數時才能用,比如具名插槽:

元件中是有 name 屬性的,元件的 name 屬性主要有以下幾個作用:

在自身元件呼叫自身的時候,可以通過定義name的值進行遞迴呼叫

export default

}

// 下面的 is 後面的名字應該是元件的 name 屬性值

元件在全域性用vue.component()註冊時,全域性 id 自動作為元件的 name。

要求被切換到的元件都有自己的名字,不論是通過元件的name選項還是區域性/全域性註冊。

指定 name 選項的另乙個好處是便於除錯,有名字的元件有更友好的警告資訊。

另外,當在有 vue-devtools,未命名元件將顯示成,這很沒有語義。如果元件有 name 屬性,那在 vue-devtools 中顯示的將是 name 的值,元件樹更有語義。

父子元件之間可以通過 props 進行傳值,在父元件中修改傳過去的值時,在子元件中接收到的 props 值都會隨之發生改變。但是如果把 props 的值賦值給 data 中的資料時,data 中的資料不一定會隨之改變。

當 props 值不是物件時,直接賦值給 data 屬性,data 屬性不會發生響應式改變。比如當 props 值是物件時,如果直接賦值給 data 屬性,data 屬性會發生響應式改變,如果將物件的某個屬性或者直接將某個基本型別值賦值給 data 屬性,此時子元件中該 data 屬性不會發生響應式改變。

總而言之,將物件賦值給 data 屬性會隨之發生改變,將基本型別值賦值給 data 屬性則不會發生響應式改變。

//父元件 parent.vue 

點選修改資料

data()

}},methods:

}//子元件 child.vue

props: ['nameprop','humanprop'], //props值會響應式地發生改變

data()

}} -- } //props值 都會響應式地發生改變

} //data屬性 此時不會改變

} //這裡會改變

}     //這裡不會改變

請注意:是子元件中的 data 屬性的資料不會發生響應式改變,但 props 屬性的值都是會響應式改變的。所以如果你不需要修改傳過來的值的話,你也可以直接用 props 屬性的值,而不用賦值給 data 中的屬性值。

上面說到如果將值型別的 props 值賦值給 data 屬性時,data 屬性不會隨著父元件的資料的改變而發生改變,要想解決這個問題,可以通過監聽 props 的值,當 props 的某個值發生改變時,再將其賦值給 data 屬性。

//子元件 child.vue

} //此時會發生響應式改變

props: ['name','human'], //props值會響應式地發生改變

data()

},watch:

}

當然,如果不需要修改傳遞過來的值時,你也可以直接使用接收的 prop 的值進行操作,而無需賦值給元件的 data,這樣就不用監聽改變了。

vue 擴充套件

一般在vue專案開發時會用webpack 模組化開發,它和在頁面裡引用vue 的寫法還是有區別的 webpack 配合 一般都是在webpack.config.js配置編譯的js 在輸出目錄內建立html,引用生成的js即可 它是就是require引用vue vue router,vue resou...

Vue學習擴充套件

vue學習擴充套件 string原始方法 es6字串擴充套件api 結構表示式 let arr 1,2,3 es6通過攝製角標來獲取值 物件 const person 解構表示式獲取值 const person 列印 函式簡寫方式 1.定義乙個加法的方法 傳入兩個引數a b 計算a b的結果並返回 ...

vue路由使用以及元件擴充套件

元件ref的使用 獲取dom節點 給dom節點記上ref屬性,可以理解為給dom節點起了個名字。加上ref之後,在 refs屬性中多了這個元素的引用。通過vue例項的 refs屬性拿到這個dom元素。獲取元件 給元件記上ref屬性,可以理解為給元件起了個名字。加上ref之後,在 refs屬性中多了這...