app.js
//全局组件,在template中只能有一个div类型的根标签。放在Vue实例前面。
Vue.component(
'my-componetn', {
template: `
<div>
<h2>Hello</h2>
<p>{{name}}</p>
<button @click="changeName()">changeName</button>
</div>`,
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
<body>
<div id="app-test-one">
<h1>{{title}}</h1>
<my-componetn />
</div>
<div id="app-test-two">
<h1>{{title}}</h1>
<my-componetn />
</div>
</body>
效果图:
如果想实现点击一个changeName按钮两个Vue实例下的name都改变:
//定义全局变量
let data = {
name: "Vue"
}
需要在js中添加一个全局变量,一定要放在最前面,否则后面拿不到data会报错。修改
template
-->data
-->return
的返回值,改为return data