vue multivue

Multivue para vue.js

Use vários aplicativos VUE da mesma classe na mesma página.

Suporte de vue

Suporta apenas vue> = 2

Instalação

 $ npm install vue-multivue --save

JS & Vue

// AwesomeComponent.vue
< template >
    < div >
        < button @click = " doSomethingCool " ></ button >
    </ div >
</ template >

< script >
    export default {
        data () {
            return {
                isDoingSomethingCool : false
            }
        },

        methods : {
            doSomethingCool () {
                this . isDoingSomethingCool = true ;
            }
        }
    }
</ script >

 // app.js
import MultiVue from 'vue-multivue' ;
import AwesomeComponent from './Components/AwesomeComponent.vue' ;

new MultiVue ( '.my-app' , {
    components : {
        AwesomeComponent
    }
} ) ; 

Html

Agora você pode usar seu aplicativo com o seletor .my-app várias vezes em uma única página.

 < html >
    < body >
        < div class =" wrap " >
            < div class =" my-app " >
                < awesome-component > </ awesome-component >
            </ div >

            < div class =" some-other-div " > ... </ div >

            < div class =" my-app another-class " >
                < awesome-component > </ awesome-component >
            </ div >

            < div class =" some-other-div-again " > ... </ div >

            < div class =" my-app some-other-class " >
                < awesome-component > </ awesome-component >
            </ div >
        </ div >
    </ body >
</ html >