vue创建组件的步骤,编写vue组件
本文主要介绍了Vue组件的创建和使用，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
目录
一、什么是组件？二、创建全局组件的方式1，Vue.extend2，Vue。component2，直接用vue。组件3，创建本地组件4，组件中的数据和方法5，组件props/$emit之间的通信通过事件形式总结
一、什么是组件？
组件是Vue最强大的功能之一，js组件可以扩展HTML元素，封装可重用代码。从高层次来说，一个组件就是一个自定义元素，Vue.js的编译器给它添加了特殊的功能。
二、创建全局组件
方式一
1、Vue.extend
var com1=Vue.extend({
//组件要公开的HTML结构通过template属性指定。
模板： h3这是用Vue.extend创建的组件/h3
})
2、Vue.component
Vue.component(组件的名称，创建的组件模板对象)注册组件。
Vue.component(myCom1 ，Com1)
注意:如果使用Vue时全局组件的名称由hump命名。组件时，需要在引用该组件时将大写字母改为小写字母。同时，在两个单词前，使用“-”链接。如果没有，就用名字。
方式二
直接使用Vue.component
Vue.component(mycom2 ，{
模板： divh3这是使用Vue.component直接创建的组件/h3
span123/span/div
})
示例：
方式三
1.在受控的#app外部，使用template元素定义组件的HTML模板结构。
模板id=tmpl
差异
H1是通过模板元素/h1外部定义的组件结构。
H4很好用，不错！/h4
/div
/模板
2.用id注册组件
Vue.component(mycom3 ，{
模板：“#tmpl”
})
三、 创建局部组件
本地组件的创建方式与全局组件相同。唯一的区别是本地组件是在Vue实例中定义的。
四、组件中的data 和 methods
1.组件可以有自己的数据。
2.组件中的数据与实例中的数据略有不同，实例中的数据可以是对象。但是组件中的数据必须是方法。
3.除了作为一个方法，组件中的数据还必须返回一个对象。
4.组件中数据的使用方式与实例中数据的使用方式相同。(方法相同)
五、组件间的通信方式
props/$emit
父组件A通过props传递给子组件B，B到A通过组件B中的$ emit和组件A中的v-on实现.
子组件：
模板
你好
保险商实验所
li用户v-bind:key=index{{ user }}/li中的v-for=(user，index)
/ul
/div
/模板
脚本
导出默认值{
名称：“用户”，
道具：{
Users: {//父组件中子标记的用户定义名称
类型：数组，
要求：真
}
}
}
/脚本
样式范围
李{
列表-样式-位置：内部；
}
/风格
父组件：
模板
div id=应用程序
img alt=Vue logo src=。/assets/logo.png
Users v-bind:Users= Users /Users
/div
/模板
脚本
从“@/组件/用户”导入用户；
导出默认值{
名称：“应用程序”，
data(){
返回{
用户：[Xi 安邮电， Xi 安石油，西北政法， Xi 安工业， Xi 安金融]
}
},
组件：{
用户，
}
}
/脚本
通过事件形式
子组件:
模板
页眉
h1 @ click= change title“{ title } }/h1
/页眉
/模板
脚本
导出默认值{
姓名：儿子，
data(){
返回{
标题：“Vue.js演示”
}
},
方法：{
changeTitle(){
这个。$emit(titleChanged ， Xi 安邮电大学)；
}
}
}
/脚本
样式范围
h1{
背景色：黄绿色；
}
/风格
父组件：
模板
div id=应用程序
Son v-on:title changed= update title /Son
h2{{ title }}/h2
/div
/模板
脚本
从“@/components/Son”导入Son；
导出默认值{
姓名：父亲，
data(){
返回{
标题：“传递了一个值”
}
},
方法：{
更新标题(e){
这. title=e
}
},
组件：{
儿子，
}
}
/脚本
总结
子组件通过事件向父组件发送消息，这实际上意味着子组件向父组件发送自己的数据。
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。