耀极客论坛

 找回密码
 立即注册
查看: 661|回复: 0

一篇文章带你了解Vue组件的创建和使用

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-9 00:18:19 | 显示全部楼层 |阅读模式
  这篇文章主要为大家介绍了Vue组件的创建和使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助


一、什么是组件?
  组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。

二、创建全局组件

方式一

1、Vue.extend
  1.        var com1 = Vue.extend({
  2. // 通过 template 属性,指定了组件要展示的HTML结构
  3.                template: '‹h3>这是使用 Vue.extend 创建的组件‹/h3>'
  4.             })
复制代码
2、Vue.component
  Vue.component(‘组件的名称', 创建出来的组件模板对象) 注册组件
  1.   Vue.component('myCom1', com1)
复制代码
  注意:如果使用Vue.Component 注册全局组件的时候,组件的名称使用了驼峰命名,则在引用组件的时候需要把大写的驼峰改为小写的字母,同时,两个单词之前,使用 “–” 链接。如果不使用则直接拿名称来使用即可。



方式二

直接使用Vue.component
  1.             Vue.component('mycom2', {
  2.                 template: '‹div>‹h3>这是直接使用 Vue.component 创建出来的组件‹/h3>
  3. ‹span>123‹/span>‹/div>'
  4.             })
复制代码
  示例:



方式三
  1、被控制的 #app 外面,使用 template 元素,定义组件的HTML模板结构。
  1. ‹template id="tmpl">
  2.             ‹div>
  3.                 ‹h1>这是通过 template 元素,在外部定义的组件结构‹/h1>
  4.                 ‹h4>好用,不错!‹/h4>
  5.             ‹/div>
  6.         ‹/template>
复制代码
  2、使用id注册组件
  1.    Vue.component('mycom3', {
  2.         template: '#tmpl'
  3.     })
复制代码
三、 创建局部组件
  局部组件的创建和全局组件的创建方法一样。唯一区别的是,局部组件是在Vue实例中定义的。



四、组件中的data 和 methods
  1、组件可以拥有自己的数据。

  2、组件中的data 和实例中的data 有点不一样,实例中的data 可以为一个对象。但是组件中的data必须是一个方法。

  3、组件中的data除了是一个方法,还必须返回一个对象。

  4、组件中的data 的使用方式和 实例中的data 使用方式一样。(methods也一样)



五、组件间的通信方式


props/$emit
  父组件A通过props的方式向子组件B传递,B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现。

  子组件:
  1. ‹template>
  2.   ‹div class="hello">
  3.     ‹ul>
  4.       ‹li v-for="(user,index) in users" v-bind:key="index">{{ user }}‹/li>
  5.     ‹/ul>
  6.   ‹/div>
  7. ‹/template>
  8. ‹script>
  9. export default {
  10.   name: "users",
  11.   props: {
  12.     users: {  //父组件中子标签自定义的名字
  13.       type: Array,
  14.       require: true
  15.     }
  16.   }
  17. }
  18. ‹/script>
  19. ‹style scoped>
  20. li{
  21.    list-style-position: inside;
  22. }
  23. ‹/style>
复制代码
  父组件:
  1. ‹template>
  2.   ‹div id="app">
  3.     ‹img alt="Vue logo" src="./assets/logo.png">
  4.     ‹Users v-bind:users="users"> ‹/Users>
  5.   ‹/div>
  6. ‹/template>
  7. ‹script>
  8. import Users from "@/components/users";
  9. export default {
  10.   name: 'App',
  11.   data(){
  12.     return {
  13.       users: ['西安邮电','西安石油','西北政法','西安工业','西安财经']
  14.     }
  15.   },
  16.   components: {
  17.     Users,
  18.   }
  19. }
  20. ‹/script>
复制代码
通过事件形式
  子组件
  1. ‹template>
  2.   ‹header>
  3.     ‹h1 @click="changeTitle">{{ title }}‹/h1>
  4.   ‹/header>
  5. ‹/template>
  6. ‹script>
  7. export default {
  8.   name: "Son",
  9.   data(){
  10.     return {
  11.       title: 'Vue.js Demo'
  12.     }
  13.   },
  14.   methods: {
  15.     changeTitle(){
  16.       this.$emit('titleChanged','西安邮电大学');
  17.     }
  18.   }
  19. }
  20. ‹/script>
  21. ‹style scoped>
  22. h1{
  23.    background-color: greenyellow;
  24. }
  25. ‹/style>
复制代码
  父组件:
  1. ‹template>
  2.   ‹div id="app">
  3.     ‹Son v-on:titleChanged="updateTitle">‹/Son>
  4.     ‹h2>{{ title }}‹/h2>
  5.   ‹/div>
  6. ‹/template>
  7. ‹script>
  8. import Son from "@/components/Son";
  9. export default {
  10.   name: "Father",
  11.   data(){
  12.     return {
  13.       title: '传递的是一个值'
  14.     }
  15.   },
  16.   methods: {
  17.     updateTitle(e){
  18.       this.title = e
  19.     }
  20.   },
  21.   components:{
  22.     Son,
  23.   }
  24. }
  25. ‹/script>
复制代码
总结
  子组件通过events(事件)给父组件发送消息,实际上就是子组件把自己的数据发送到父组件。
  本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-10 03:28 , Processed in 0.070217 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表