vue学习 十 实例化多个Vue对象 和 组件的使用
vue学习 十 实例化多个Vue对象 和 组件的使用
meihuasheng
发布于 2021-03-16 21:36:39
发布于 2021-03-16 21:36:39
实例化多个Vue对象和一个其实都是一样的格式，如下：
代码是没有截屏到的部分
然后想通过第二个Vue对象来改变第一个Vue中的数据也是可以的，通过one.name的方式来实现
<div id="app-one">
<h3>{{name}}</h3>
<p>{{test}}</p>
</div>
<div id="app-two">
<h3>{{name}}</h3>
<p>{{test}}</p>
<button v-on:click="changeName">修改one内容</button>
</div>
组件的使用：（很重要的东西吧！！！）
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
}) 写法就是按照这个来写的，然后你就可以在div中使用和复用新定义的标签了，注意一个组件的 data 选项必须是一个函数
本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-08-12 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录