vue multivue

Vue.js的多级

在同一页面上使用同一类的多个VUE应用程序。

vue支持

仅支持vue> = 2

安装

 $ 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

现在，您可以在单个页面上多次将应用程序与.my-app选择器一起使用。

 < 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 >