Vue Vue.component （CDN）

app.js

//全局组件,在template中只能有一个div类型的根标签。放在Vue实例前面。
Vue.component(
    'my-componetn', {
    template: `
    

        
Hello
        
{{name}}
        changeName
    
`,
    data() {
        return {
            name: "Vue"
        }
    },
    methods: {
        changeName() {
            this.name = "qwe"
        }
    }
}
)

//构建两个Vue实例
const one = new Vue({
    el: "#app-test-one",
    data: {
        title: "ONE"
    }
})

const two = new Vue({
    el: "#app-test-two",
    data: {
        title: "TWO"
    }
})

index.html

    

        
{{title}}
        
    
    

        
{{title}}
        
    

效果图：

Vue.component.gif

如果想实现点击一个changeName按钮两个Vue实例下的name都改变：

//定义全局变量
let data = {
    name: "Vue"
}

需要在js中添加一个全局变量，一定要放在最前面，否则后面拿不到data会报错。修改template-->data-->return的返回值，改为return data