快速搞懂Vue里面components和template
快速搞懂Vue里面components和template
多凡
发布于 2019-11-01 09:34:11
发布于 2019-11-01 09:34:11
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44580977/article/details/99252231
vue可以把内容变成组件化，然后提高复用性,那是怎样进行组件化，然后使用呢？
1.先写组件
在这里插入图片描述
2.引用组件
在这里插入图片描述
我们是单独写的一个js文件存放组件的所以它不是全局引用的，所以我就要把上面写好的registerForm组件引用过来，在这里它的名字被我指定做了loginForm
3.使用组件
在这里插入图片描述
上面我们只是 引用了，就好像声明一样，我还没有使用它，所以，要使用它就要在template：写出我们的引用后的组件名，每个组件都是一个标签，就想input ，radio一样， 所以是。
4.运行结果
在这里插入图片描述
5.易混淆点 Vue.component
Vue.component 是注册全局组件，如果注册全局组件，我们就可以直接在html直接写了，全局可以。
<div id="app">
<!--使用定义好的全局组件-->
<counter></counter>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
// 定义全局组件，两个参数：1，组件名称。2，组件参数
Vue.component("counter",{
template:'<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>',
data(){
return {
count:0
}
}
})
var app = new Vue({
el:"#app"
})6.运行结果
在这里插入图片描述
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-08-12 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录