vue組件以及父子組件通信方式
vue組件及父子組件通信
一. 認識組件化
1.1. 什么是組件化？
人面對復(fù)雜問題的處理方式：
任何一個人處理信息的邏輯能力都是有限的
所以，當(dāng)面對一個非常復(fù)雜的問題時，我們不太可能一次性搞定一大堆的內(nèi)容。
但是，我們?nèi)擞幸环N天生的能力，就是將問題進行拆解。
如果將一個復(fù)雜的問題，拆分成很多個可以處理的小問題，再將其放在整體當(dāng)中，你會發(fā)現(xiàn)大的問題也會迎刃而解。
組件化也是類似的思想：
- 如果我們將一個頁面中所有的處理邏輯全部放在一起，處理起來就會變得非常復(fù)雜，而且不利于后續(xù)的管理以及擴展；
- 但如果，我們講一個頁面拆分成一個個小的功能塊，每個功能塊完成屬于自己這部分獨立的功能，那么之后整個頁面的管理和維護就變得非常容易了；
- 如果我們將一個個功能塊拆分后，就可以像搭建積木一下來搭建我們的項目；
我們需要通過組件化的思想來思考整個應(yīng)用程序：
- 我們將一個完整的頁面分成很多個組件；
- 每個組件都用于實現(xiàn)頁面的一個功能塊；
- 而每一個組件又可以進行細分；
- 而組件本身又可以在多個地方進行復(fù)用；
1.2. Vue的組件化
組件化是Vue、React、Angular的核心思想，也是現(xiàn)在前端框架的重點內(nèi)容（包括以后實戰(zhàn)項目）：
- 前面我們的createApp函數(shù)傳入了一個對象App，這個對象其實本質(zhì)上就是一個組件，也是我們應(yīng)用程序的根組件；
- 組件化提供了一種抽象，讓我們可以開發(fā)出一個個獨立可復(fù)用的小組件來構(gòu)造我們的應(yīng)用；
- 任何的應(yīng)用都會被抽象成一顆組件樹；
組件化思想的應(yīng)用：
- 有了組件化的思想，我們在之后的開發(fā)中就要充分的利用它；
- 盡可能的將頁面拆分成一個個小的、可復(fù)用的組件；
- 這樣讓我們的代碼更加方便組織和管理，并且擴展性也更強；
接下來，我們來學(xué)習(xí)一下在Vue中如何注冊一個組件，以及之后如何使用這個注冊后的組件。
二. 注冊一個組件
2.1. 注冊全局組件
如果我們現(xiàn)在有一部分內(nèi)容（模板、邏輯等），我們希望將這部分內(nèi)容抽取到一個獨立的組件中去維護，這個時候如何注冊一個組件呢？
我們先從簡單的開始談起，比如下面的模板希望抽離到一個單獨的組件：
<h2>{{title}}</h2>
<p>{{message}}</p>注冊組件分成兩種：
- 全局組件：在任何其他的組件中都可以使用的組件；
- 局部組件：只有在注冊的組件中才能使用的組件；
我們先來學(xué)習(xí)一下全局組件的注冊：
- 全局組件需要使用我們?nèi)謩?chuàng)建的app來注冊組件；
- 通過component方法傳入組件名稱、組件對象即可注冊一個全局組件了；
<template id="my-cpn">
<h2>我是組件標題</h2>
<p>我是組件內(nèi)容，哈哈哈哈</p>
</template>
<script src="../js/vue.js"></script>
<script>
const app = Vue.createApp(App);
// 注冊全局組件(使用app)
app.component("my-cpn", {
template: "#my-cpn"
});
app.mount('#app');
</script>之后，我們可以在App組件的template中直接使用這個全局組件：
<template id="my-app">
<my-cpn></my-cpn>
<my-cpn></my-cpn>
<my-cpn></my-cpn>
<my-cpn></my-cpn>
</template>當(dāng)然，我們組件本身也可以有自己的代碼邏輯：
// 注冊全局組件(使用app)
app.component("my-cpn", {
template: "#my-cpn",
data() {
return {
title: "我是標題",
message: "我是內(nèi)容, 哈哈哈哈"
}
},
methods: {
btnClick() {
console.log("btnClick");
}
}
});2.2. 組件的名稱
在通過app.component注冊一個組件的時候，第一個參數(shù)是組件的名稱，定義組件名的方式有兩種：
方式一：使用kebab-case（短橫線分割符）
當(dāng)使用 kebab-case (短橫線分隔命名) 定義一個組件時，你也必須在引用這個自定義元素時使用 kebab-case，例如 ；
app.component('my-component-name', {
/* ... */
})方式二：使用PascalCase（駝峰標識符）
當(dāng)使用 PascalCase (首字母大寫命名) 定義一個組件時，你在引用這個自定義元素時兩種命名法都可以使用。也就是說 和 都是可接受的；
app.component('MyComponentName', {
/* ... */
})import 導(dǎo)入進來的組件最好加.vue
- 1、寫template標簽時候有提示
- 2、可以ctrl+鼠標左鍵點進去
2.3. 注冊局部組件
全局組件往往是在應(yīng)用程序一開始就會全局組件完成，那么就意味著如果某些組件我們并沒有用到，也會一起被注冊：
- 比如我們注冊了三個全局組件：ComponentA、ComponentB、ComponentC；
- 在開發(fā)中我們只使用了ComponentA、ComponentB，如果ComponentC沒有用到但是我們依然在全局進行了注冊，那么就意味著類似于webpack這種打包工具在打包我們的項目時，我們依然會對其進行打包；
- 這樣最終打包出的JavaScript包就會有關(guān)于ComponentC的內(nèi)容，用戶在下載對應(yīng)的JavaScript時也會增加包的大??；
所以在開發(fā)中我們通常使用組件的時候采用的都是局部注冊：
- 局部注冊是在我們需要使用到的組件中，通過components屬性選項來進行注冊；
- 比如之前的App組件中，我們有data、computed、methods等選項了，事實上還可以有一個components選項；
- 該components選項對應(yīng)的是一個對象，對象中的鍵值對是 組件的名稱: 組件對象；
接下來，我們看一下局部組件是如何注冊的：
<div id="app"></div>
<template id="my-app">
<component-a></component-a>
<component-b></component-b>
</template>
<template id="component-a">
<h2>{{title}}</h2>
<p>{{message}}</p>
</template>
<template id="component-b">
<h2>{{title}}</h2>
<p>{{message}}</p>
</template>
<script src="../js/vue.js"></script>
<script>
const ComponentA = {
template: "#component-a",
data() {
return {
title: "我是ComponentA標題",
message: "我是ComponentA內(nèi)容, 哈哈哈哈"
}
}
}
const ComponentB = {
template: "#component-b",
data() {
return {
title: "我是ComponentB標題",
message: "我是ComponentB內(nèi)容, 呵呵呵呵"
}
}
}
const App = {
template: '#my-app',
components: {
'component-a': ComponentA,
'component-b': ComponentB,
},
data() {
return {
message: "Hello World"
}
}
}
Vue.createApp(App).mount('#app');
</script>在開發(fā)中通常我們都會注冊局部組件，而不是全局組件。
三. Vue的開發(fā)模式
3.1. Vue的開發(fā)模式
目前我們使用vue的過程都是在html文件中，通過template編寫自己的模板、腳本邏輯、樣式等。
但是隨著項目越來越復(fù)雜，我們會采用組件化的方式來進行開發(fā)：
- 這就意味著每個組件都會有自己的模板、腳本邏輯、樣式等；
- 當(dāng)然我們依然可以把它們抽離到單獨的js、css文件中，但是它們還是會分離開來；
- 也包括我們的script是在一個全局的作用域下，很容易出現(xiàn)命名沖突的問題；
- 并且我們的代碼為了適配更一些瀏覽器，必須使用ES5的語法；
- 在我們編寫代碼完成之后，依然需要通過工具對代碼進行構(gòu)建、代碼；
所以在真實開發(fā)中，我們可以通過一個后綴名為 .vue 的single-file components (單文件組件) 來解決，并且可以使用webpack或者vite或者rollup等構(gòu)建工具來對其進行處理。
在這個組件中我們可以獲得非常多的特性：
代碼的高亮；
- ES6、CommonJS的模塊化能力；
- 組件作用域的CSS；
- 可以使用預(yù)處理器來構(gòu)建更加豐富的組件，比如TypeScript、Babel、Less、Sass等；
3.2. 如何支持SFC
如果我們想要使用這一的SFC的.vue文件，比較常見的是兩種方式：
- 方式一：使用Vue CLI來創(chuàng)建項目，項目會默認幫助我們配置好所有的配置選項，可以在其中直接使用.vue文件；
- 方式二：自己使用webpack或rollup或vite這類打包工具，對其進行打包處理；
我們最終，無論是后期我們做項目，還是在公司進行開發(fā)，通常都會采用Vue CLI的方式來完成。
3.3 css作用域污染問題
app.vue是helloworld.vue的父組件
如果在app.vue上寫了一個h2.{color:red}
那么不光app.vue的對應(yīng)字體顏色會變化，helloworld.vue對應(yīng)字體顏色也會變化。
解決方法：
- 不要寫h2這種大范圍的css
- 子組件最外層要加上div
四. 認識組件的嵌套
4.1. App單獨開發(fā)
前面我們是將所有的邏輯放到一個App.vue中：
- 在之前的案例中，我們只是創(chuàng)建了一個組件App；
- 如果我們一個應(yīng)用程序?qū)⑺械倪壿嫸挤旁谝粋€組件中，那么這個組件就會變成非常的臃腫和難以維護；所以組件化的核心思想應(yīng)該是對組件進行拆分，拆分成一個個小的組件；
- 再將這些組件組合嵌套在一起，最終形成我們的應(yīng)用程序；
我們來分析一下下面代碼的嵌套邏輯，假如我們將所有的代碼邏輯都放到一個App.vue組件中：
<template>
<div>
<h2>Header</h2>
<h2>NavBar</h2>
</div>
<div>
<h2>Banner</h2>
<ul>
<li>商品列表1</li>
<li>商品列表2</li>
<li>商品列表3</li>
<li>商品列表4</li>
<li>商品列表5</li>
</ul>
</div>
<div>
<h2>Footer</h2>
<h2>免責(zé)聲明</h2>
</div>
</template>
<script>
export default {
};
</script>
<style scoped></style>我們會發(fā)現(xiàn)，將所有的代碼邏輯全部放到一個組件中，代碼是非常的臃腫和難以維護的。并且在真實開發(fā)中，我們會有更多的內(nèi)容和代碼邏輯，對于擴展性和可維護性來說都是非常差的。
所以，在真實的開發(fā)中，我們會對組件進行拆分，拆分成一個個功能的小組件。
4.2. 組件的拆分
我們可以按照如下的方式進行拆分：
Header.vue組件
<template>
<div>
<h2>Header</h2>
<h2>NavBar</h2>
</div>
</template>Main.vue組件：
<template>
<div>
<banner></banner>
<product-list></product-list>
</div>
</template>Banner.vue組件：
<template> <h2>Banner</h2> </template>
ProductList組件：
<template>
<ul>
<li>商品列表1</li>
<li>商品列表2</li>
<li>商品列表3</li>
<li>商品列表4</li>
<li>商品列表5</li>
</ul>
</template>Footer.vue組件：
<template>
<div>
<h2>Footer</h2>
<h2>免責(zé)聲明</h2>
</div>
</template>按照如上的拆分方式后，我們開發(fā)對應(yīng)的邏輯只需要去對應(yīng)的組件編寫就可。
4.3. 組件的通信
上面的嵌套邏輯如下，它們存在如下關(guān)系：
- App組件是Header、Main、Footer組件的父組件；
- Main組件是Banner、ProductList組件的父組件；
在開發(fā)過程中，我們會經(jīng)常遇到需要組件之間相互進行通信：
- 比如App可能使用了多個Header，每個地方的Header展示的內(nèi)容不同，那么我們就需要使用者傳遞給Header一些數(shù)據(jù)，讓其進行展示；
- 又比如我們在Main中一次性請求了Banner數(shù)據(jù)和ProductList數(shù)據(jù)，那么就需要傳遞給他們來進行展示；
- 也可能是子組件中發(fā)生了事件，需要有父組件來完成某些操作，那就需要子組件向父組件傳遞事件；
總之，在一個Vue項目中，組件之間的通信是非常重要的環(huán)節(jié)，所以接下來我們就具體學(xué)習(xí)一下組件之間是如何相互之間傳遞數(shù)據(jù)的；
五. 父子組件的相互通信
5.1. 父組件傳遞給子組件
在開發(fā)中很常見的就是父子組件之間通信，比如父組件有一些數(shù)據(jù)，需要子組件來進行展示：
- 這個時候我們可以通過props來完成組件之間的通信；
什么是Props呢？
- Props是你可以在組件上注冊一些自定義的attribute；
- 父組件給這些attribute賦值，子組件通過attribute的名稱獲取到對應(yīng)的值；
Props有兩種常見的用法：
- 方式一：字符串?dāng)?shù)組，數(shù)組中的字符串就是attribute的名稱；
- 方式二：對象類型，對象類型我們可以在指定attribute名稱的同時，指定它需要傳遞的類型、是否是必須的、默認值等等；
5.1.1. props的數(shù)組用法
封裝ShowMessage.vue組件：
<template>
<div>
<h2>組件展示的title:{{title}}</h2>
<p>組件展示的content: {{content}}</p>
</div>
</template>
<script>
export default {
props: ["title", "content"]
}
</script>通過App.vue傳遞給組件數(shù)據(jù)：
<template>
<div>
<show-message title="哈哈哈" content="我是哈哈哈"></show-message>
<show-message title="呵呵呵" content="我是呵呵呵"></show-message>
</div>
</template>
<script>
import ShowMessage from './ShowMessage.vue';
export default {
components: {
ShowMessage
}
}
</script>當(dāng)然，我們也可以將data中的數(shù)據(jù)傳遞給子組件：
<template>
<div>
<show-message :title="title1" :content="content1"></show-message>
<show-message :title="title2" :content="content2"></show-message>
</div>
</template>
<script>
import ShowMessage from './ShowMessage.vue';
export default {
components: {
ShowMessage
},
data() {
return {
title1: "哈哈哈",
content1: "我是哈哈哈",
title2: "呵呵呵",
content2: "我是呵呵呵"
}
}
}
</script>當(dāng)然，我們也可以直接傳遞一個對象：
<template>
<div>
<show-message :title="message.title" :content="message.content"></show-message>
<show-message v-bind="message"></show-message>
</div>
</template>
<script>
import ShowMessage from './ShowMessage.vue';
export default {
components: {
ShowMessage
},
data() {
return {
message: {
title: "嘿嘿嘿",
content: "我是嘿嘿嘿"
}
}
}
}
</script>5.1.2. props的對象用法
數(shù)組用法中我們只能說明傳入的attribute的名稱，并不能對其進行任何形式的限制，接下來我們來看一下對象的寫法是如何讓我們的props變得更加完善的。
ShowMessage.vue的props對象寫法：
<template>
<div>
<h2>組件展示的title:{{title}}</h2>
<p>組件展示的content: {{content}}</p>
</div>
</template>
<script>
export default {
props: { // 指定類型：
title: String,
// 指定類型，同時指定是否必選、默認值：
content: { type: String,require: true,default: "哈哈哈" } } }
</script>細節(jié)一：那么type的類型都可以是哪些呢？
- String
- Number
- Boolean
- Array
- Object
- Date
- Function
- Symbol
細節(jié)二：對象類型的其他寫法
<script>
export default {
props: { // 基礎(chǔ)的類型檢查 (`null` 和 `undefined` 會通過任何類型驗證)
propA: Number,
// 多個可能的類型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 帶有默認值的數(shù)字
propD: {
type: Number,
default: 100
},
// 帶有默認值的對象
propE: {
type: Object, // 對象或數(shù)組默認值必須從一個工廠函數(shù)獲取
default () {
return {
message: 'hello'
}
}
},
// 自定義驗證函數(shù)
propF: {
validator(value) { // 這個值必須匹配下列字符串中的一個
return ['success', 'warning', 'danger'].includes(value)
}
},
// 具有默認值的函數(shù)
propG: {
type: Function, // 與對象或數(shù)組默認值不同，這不是一個工廠函數(shù) —— 這是一個用作默認值的函數(shù)
default () {
return 'Default function'
}
}
},
}
</script>細節(jié)三：Prop 的大小寫命名(camelCase vs kebab-case)
- HTML 中的 attribute 名是大小寫不敏感的，所以瀏覽器會把所有大寫字符解釋為小寫字符；
- 這意味著當(dāng)你使用 DOM 中的模板時，camelCase (駝峰命名法) 的 prop 名需要使用其等價的 kebab-case (短橫線分隔命名) 命名；
ShowMessage.vue組件：
<template>
<div>
<p>{{messageInfo}}</p>
</div>
</template>
<script>
export default {
props: {
messageInfo: String,
}
}
</script>App.vue組件中傳入：
<template> <div> <show-message messageInfo="哈哈哈"></show-message> <show-message message-info="哈哈哈"></show-message>//推薦這個 </div> </template>
重申一次，如果你使用.vue文件寫，那么這個限制就不存在，因為messageInfo是由vueloader編譯的，他認識。如果使用template：xxx，那么必須使用kebab-case
5.1.3. 非Prop的Attribute
什么是非Prop的Attribute呢？
- 當(dāng)我們傳遞給一個組件某個屬性，但是該屬性并沒有定義對應(yīng)的props或者emits時，就稱之為 非Prop的Attribute；
- 常見的包括class、style、id屬性等；
Attribute繼承
當(dāng)組件有單個根節(jié)點時，非Prop的Attribute將自動添加到根節(jié)點的Attribute中：
禁用Attribute繼承
如果我們不希望組件的根元素繼承attribute，可以在組件中設(shè)置 inheritAttrs: false：
- 禁用attribute繼承的常見情況是需要將attribute應(yīng)用于根元素之外的其他元素；
- 我們可以通過 $attrs來訪問所有的 非props的attribute；
<template>
<div> 我是NotPropAttribue組件 <h2 :class="$attrs.class"></h2>
</div>
</template>
<script>
export default {
inheritAttrs: false
}
</script>多個根節(jié)點的attribute
多個根節(jié)點的attribute如果沒有顯示的綁定，那么會報警告，我們必須手動的指定要綁定到哪一個屬性上：
<template> <div :class="$attrs.class">我是NotPropAttribue組件1</div> <div>我是NotPropAttribue組件2</div> <div>我是NotPropAttribue組件3</div> </template>
5.2. 子組件傳遞給父組件
什么情況下子組件需要傳遞內(nèi)容到父組件呢？
- 當(dāng)子組件有一些事件發(fā)生的時候，比如在組件中發(fā)生了點擊，父組件需要切換內(nèi)容；
- 子組件有一些內(nèi)容想要傳遞給父組件的時候；
我們?nèi)绾瓮瓿缮厦娴牟僮髂兀?/p>
- 首先，我們需要在子組件中定義好在某些情況下觸發(fā)的事件名稱；
- 其次，在父組件中以v-on的方式傳入要監(jiān)聽的事件名稱，并且綁定到對應(yīng)的方法中；
- 最后，在子組件中發(fā)生某個事件的時候，根據(jù)事件名稱觸發(fā)對應(yīng)的事件；
5.2.1. 自定義事件的流程
我們封裝一個CounterOperation.vue的組件：
- 內(nèi)部其實是監(jiān)聽兩個按鈕的點擊，點擊之后通過 this.$emit的方式發(fā)出去事件；
<template>
<div> <button @click="increment">+1</button> <button @click="decrement">-1</button> </div>
</template>
<script>
export default {
emits: ["addOne", "subOne"],
methods: {
increment() {
this.$emit("addOne");
},
decrement() {
this.$emit("subOne");
}
}
}
</script>我們可以在App.vue中來監(jiān)聽自定義組件發(fā)出的事件：
<template>
<div>
<h2>當(dāng)前計數(shù): {{counter}}</h2>
<counter-operation @addOne="add" @subOne="sub"></counter-operation>
</div>
</template>
<script>
import CounterOperation from './CounterOperation.vue';
export default {
components: {
CounterOperation
},
data() {
return {
counter: 0
}
},
methods: {
add() {
this.counter++
},
sub() {
this.counter--;
}
}
}
</script>5.2.2. 自定義事件的參數(shù)
自定義事件的時候，我們也可以傳遞一些參數(shù)給父組件：
<template>
<div> <button @click="increment">+1</button> <button @click="incrementTen">+10</button> <button @click="decrement">-1</button>
</div>
</template>
<script>
export default {
methods: {
incrementTen() {
this.$emit("addTen", 10)
}
}
}
</script>
<style scoped></style>5.2.3. 自定義事件的驗證
在vue3當(dāng)中，我們可以對傳遞的參數(shù)進行驗證：
<template>
<div> <button @click="incrementTen">+10</button> </div>
</template>
<script>
export default {
emits: {
addTen: function(payload) {
if (payload === 10) {
return true
}
return false;
}
},
methods: {
incrementTen() {
this.$emit("addTen", 10)
}
}
}
</script>5.3. 組件間通信案例練習(xí)
我們來做一個相對綜合的練習(xí)：
5.3.1. TabControl實現(xiàn)
TabControl.vue的實現(xiàn)代碼：
<template>
<div class="tab-control"> <template v-for="(item, index) in titles" :key="item">
<div class="tab-control-item" @click="itemClick(index)" :class="{active: index === currentIndex}"> <span class="underline">{{ item }}</span>
</div>
</template> </div>
</template>
<script>
export default {
props: {
titles: {
type: Array,
default () {
return [];
},
},
},
emits: ["titleClick"],
data() {
return {
currentIndex: 0
}
},
methods: {
itemClick(index) {
this.currentIndex = index;
this.$emit("titleClick", index);
},
},
};
</script>
<style scoped>
.tab-control {
display: flex;
justify-content: space-between;
}
.tab-control-item {
flex: 1;
text-align: center;
height: 40px;
line-height: 40px;
}
.tab-control-item.active {
color: red;
}
.tab-control-item.active span {
display: inline-block;
border-bottom: 4px solid red;
padding: 0 10px;
}
</style>5.3.2. App中的使用
我們在App中的使用過程如下：
<template>
<div>
<tab-control :titles="titles" @titleClick="titleClick"></tab-control>
<h2>{{contents[currentIndex]}}</h2>
</div>
</template>
<script>
import TabControl from './TabControl.vue';
export default {
components: {
TabControl
},
data() {
return {
titles: ["衣服", "鞋子", "褲子"],
contents: ["衣服頁面", "鞋子頁面", "褲子頁面"],
currentIndex: 0
}
},
methods: {
titleClick(index) {
this.currentIndex = index;
}
}
}
</script>總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了Vue3項目中reset.scss模板使用導(dǎo)入示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
在vue項目中(本地)使用iconfont字體圖標的三種方式總結(jié)
這篇文章主要介紹了在vue項目中(本地)使用iconfont字體圖標的三種方式總結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
本文主要介紹了vue3清空reactive的四種方式,包含使用?Object.assign,使用?Object.keys?和?for...in?循環(huán),使用?delete?操作符和重新賦值4種,感興趣的可以了解一下2024-03-03
詳解Vue的鉤子函數(shù)(路由導(dǎo)航守衛(wèi)、keep-alive、生命周期鉤子)
這篇文章主要介紹了詳解Vue的鉤子函數(shù)(路由導(dǎo)航守衛(wèi)、keep-alive、生命周期鉤子),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
element-plus結(jié)合sortablejs實現(xiàn)table行拖拽效果
使用element-plus的el-table組件創(chuàng)建出來的table,結(jié)合sortable.js實現(xiàn)table行拖動排序,文中有詳細的代碼示例供大家參考,具有一定的參考價值,感興趣的同學(xué)可以自己動手試一試2023-10-10
這篇文章主要為大家介紹了詳解?Vue虛擬DOM如何提高前端開發(fā)效率,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-12-12
這篇文章主要介紹了vue2.0中組件傳值的幾種方式總結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
vue router解決路由帶參數(shù)跳轉(zhuǎn)時出現(xiàn)404問題
我的頁面是從一個vue頁面router跳轉(zhuǎn)到另一個vue頁面,并且利用windows.open() 瀏覽器重新創(chuàng)建一個頁簽,但是不知道為什么有時候可以有時候又不行,所以本文給大家介紹了vue router解決路由帶參數(shù)跳轉(zhuǎn)時出現(xiàn)404問題,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了Vue中引入echarts的步驟及折線圖、柱狀圖常見配置項,需要的朋友可以參考下2023-11-11
本篇文章主要介紹了vue如何從接口請求數(shù)據(jù) ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06