vue组件是什么

发布时间:2021-10-26 13:34:35 作者:iii
来源:亿速云 阅读:156

本篇内容介绍了“vue组件是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

在vue中,组件是可复用的Vue实例,它拥有独一无二的组件名称,它可以扩展HTML元素,以组件名称的方式作为自定义的HTML标签。组件可大大提高了代码的复用率。

vue组件是什么

本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。

组件是什么?

组件是Vue中的一个重要概念,是一个可以重复使用的Vue实例,它拥有独一无二的组件名称,它可以扩展HTML元素,以组件名称的方式作为自定义的HTML标签。因为组件是可复用的Vue实例,所以它们与new Vue()接收相同的选项,例如data,computed、watch、methods以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。

把一些公共的模块抽取出来,然后写成单独的的工具组件或者页面,在需要的页面中就直接引入即可。那么我们可以将其抽出为一个组件进行复用。

例如 页面头部、侧边、内容区,尾部,上传图片,等多个页面要用到一样的就可以做成组件,提高了代码的复用率。

Vue组件的使用

先说一下我们的目录

vue组件是什么

一.创建我们的组件B.vue

vue组件是什么

同理 ,新建一个hello_word.vue作为父

vue组件是什么

那么你将看到这样的结果

vue组件是什么

重点:

hello_word.vue中引入B.vue模块   // import showB from './B.vue'  引入组件

vue组件是什么

B文件的自定义模块名 showB

vue组件是什么

注册组件

 components:{
          showB,        
        },
<showB /> //使用组件

注意:定义组件名要驼峰命名法  如:使用 PascalCase  使用 kebab-case

开始进入正题 props

父组件传值给子组件(父组件绑定数据如:value="该工作了",子组件通过props获取)
子组件的props选项能够接收来自父组件数据。没错,仅仅只能接收,props是单向绑定的,即只能父组件向子组件传递,不能反向。
用法如下:

B组件

vue组件是什么

父组件

vue组件是什么

那么你将看到页面显示

vue组件是什么

在created打印下value的值

vue组件是什么

结果,     vue组件是什么

子组件传值给父组件

子组件中:

<p @click="chuanzhi">回复父组件</p>
chuanzhi() {
            this.$emit('msg', '知道了知道了') //执行 msg 函数并把要改变的值作为参数带过去
        }

vue组件是什么

父组件:

在DOM中引入@msg='msg'

<showB :value='text' @msg='msg'/> 
 msg(val){
                 console.log(val,'val')
                 }

通过方法接收

vue组件是什么

运行,点击回复父组件

vue组件是什么

打印结果:

vue组件是什么

“vue组件是什么”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

推荐阅读:
  1. vue中全局组件和局部组件是什么
  2. vue组件通信的方法是什么

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue

上一篇:PHP中如何完成Session的设置、获取和删除

下一篇:vuejs项目如何部署到tomcat

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》