Vue動態掛載不同的元件

阿新 • • 發佈：2018-12-15

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue動態掛載不同的元件</title>
</head>
<body 
>
    <div id='app'>
        <component :is='currentView'></component>
        <button @click='handleChangeView("A")'>切換到A</button>
        <button @click='handleChangeView("B")'>切換到B</button>
        <button @click='handleChangeView("C")'>切換到C</button 
>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script>
        var Home={
            template:'<p>Welcome home</p>'
        }
        var app = new Vue({
            el: '#app',
            components: {
                // 元件A 

                comA: {
                    template: '<div>元件A</div>',
                },
                // 元件B
                comB: {
                    template: '<div>元件B</div>'
                },
               // 元件C
                comC: {
                    template: '<div>元件C</div>'
                }
            },
            data: {
                currentView: 'Home' //試試 'comA'  'comB'
            },
            methods: {
                // 點選事件傳參切換不同的元件
                handleChangeView(component) {
                    console.log(component)
                    this.currentView = 'com' + component;
                }
            }
        })
    </script>
</body>

</html>

順便附上 github code 地址

Vue動態掛載不同的元件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid

Vue動態載入非同步元件

背景：目前我們專案都是按元件劃分的，然後各個元件之間封裝成產品。目前都是採用iframe直接巢狀頁面。專案中我們還是會碰到一些通用的元件跟業務之間有通訊，這種情況下iframe並不是最好的選擇，iframe存在跨域的問題，當然是postMessage還是可以通訊的，但也並非是最好的。目前有這麼一個場景：門

vue動態禁用控制元件繫結disable

場景報修範圍取值不同時，區域有時需要禁用程式碼 <el-form-item label="報修範圍" prop="applicationRange" > <el-select v-model="addInfo.applicationRange" placeho

Vue學習之不同元件之間的訊息傳遞

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia

Vue.js框架--Vuex實現不同元件計數器資料共享（二十七）

主要操作技能：官網：https://vuex.vuejs.org/zh/ 一、Vuex 解決不同元件資料共享，資料持久化。 1.安裝 cnpm install vuex --save &nbs

vue 動態元件與 v-once 指令

實現一個功能，點選按鈕，實現兩個標籤的切換顯示隱藏：程式碼一： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue

Vue如何使用動態重新整理Echarts元件

這次給大家帶來Vue如何使用動態重新整理Echarts元件，Vue使用動態重新整理Echarts元件的注意事項有哪些，下面就是實戰案例，一起來看一下。需求背景：dashboard作為目前企業中後臺產品的“門面”，如何更加實時、高效、炫酷的對統計資料進行展示，是值得前端開發工程師和UI設計師

Vue學習之旅----vuex實現不同元件的資料共享資料持久化

vuex實現不同元件的資料共享資料持久化當我們清除congsole和network後，重新整理一次，算是第一次請求，然後切換選項卡，當再回到使用者後，沒有再請求介面資料，只是載入vuex裡的資料，即快取到list裡的資料. import Vue from 'vue

Vue--動態元件與v-once指令

code： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>動態元件與v-once指令</title> &

深入解析Vue開發動態重新整理Echarts元件的教程

需求背景：dashboard作為目前企業中後臺產品的“門面”，如何更加實時、高效、炫酷的對統計資料進行展示，是值得前端開發工程師和UI設計師共同思考的一個問題。今天就從0開始，封裝一個動態渲染資料的Echarts折線圖元件，拋磚引玉，一起來思考更多有意思的元件。準備工作專案結構搭

分享一個VUE Element-UI 的多級選單動態渲染的元件

以下是元件程式碼：<template> <div class="navMenu"> <label v-for="navMenu in navMenus"> <el-menu-item v-if="navMen

vue動態生成表單元件vue-generate-form

專案地址簡介 Vue動態生成表單元件可以根據資料配置表單使用的UI庫是iView 在Vue裡一般要用到什麼元件或資料都得提前宣告所以要根據資料來生成表單只能使用Vue的render函式要做這一個元件其實並不難看一下Vue官方示例再找個UI元件庫差不多就能寫出來如果對

vue根據router傳參，實現渲染不同元件的寫法

現在的操作 <div v-if="$route.query.src">滿足條件渲染</div> <div v-else">不滿足時渲染</div> 以前的SB操作 mounted() { if(this.$ro

自己寫個vue.js外掛(2):手動掛載子元件

前面我們使用原始的方法寫了一個驗證外掛 1、學會了外掛的建立的方式 2、學會了自定義指令 3、通過自定義指令返回true或false，來控制外部label的顯示和隱藏（注意：外部的label是我們預先寫好的）動手寫程式碼 1、先移除use

常用js框架之vue.js(深入四:元件2，slot內容分發，編譯作用域，動態切換元件）

元件這內容太多了，被迫分成2部分。上節最後講了props進行父子元件通訊，這裡接著來。父子元件通訊 1.1 Vue元件是樹形結構，必然要涉及到怎麼查詢父節點，根節點，子節點。子元件可以用 this.$parent 訪問它的父元件。根例項的後代可以用 t

vue動態註冊元件

寫本篇文章之前其實也關注過vue中的一個關於載入動態元件is的API，最開始研究它只是用來實現一個tab切換的功能，使用起來也蠻不錯的。 is 預期：string | Object (元件的選項物件) 用於動態元件且基於 DOM 內模板的限制來工作。示例： <!-- 當 `currentView`

vue router 根據不同的id切換鏈接界面不刷新

out clas random date() blog 刷新 div 不刷新不同我們一般使用vue的router時候會根據不同的id來切換界面，但是界面沒有立刻刷新。下面我們講下如何解決這個問題。 html: <template> <div id

vue 動態數據請求

esp -s install port func sage cti div 動態寫在前面的話：　　很多時候，頁面的數據是從前端向後端發起請求獲取的，下面是最近用的方法： 1. axios: 詳細的用法參考： axios中文說明或者英文的說明註

vue動態切換頁面

spl display ack doctype lan solid cti isp 切換 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

VUE動態修改title

不同的 pan 進行 chat 實現生成設置 div app 首先安裝 vue-wechat-title 模塊然後引入到你的入口文件中並進行使用其次在路由的那個文件中根據不同的路由來設置title 最後在你的App.vye裏面來實現它好啦一個動態的

Vue動態掛載不同的元件

相關推薦