Vue组件是什么？Vue组件的使用

组件是什么？

组件是可复用的 Vue 实例, 把一些公共的模块抽取出来，然后写成单独的的工具组件或者页面，在需要的页面中就直接引入即可那么我们可以将其抽出为一个组件进行复用。例如页面头部、侧边、内容区，尾部，上传图片，等多个页面要用到一样的就可以做成组件，提高了代码的复用率。

Vue组件的使用 --非常详细--

先说一下我们的目录

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

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

那么你将看到这样的结果

重点：

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

B文件的自定义模块名 showB

注册组件

components:{
showB,
},

<showB /> //使用组件

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

开始进入正题 props

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

B组件

父组件

那么你将看到页面显示

在created打印下value的值

结果，

子组件传值给父组件

子组件中：

<div @click="chuanzhi">回复父组件</div>

chuanzhi() {
this.$emit('msg', '知道了知道了') //执行 msg 函数并把要改变的值作为参数带过去
}

父组件：

在DOM中引入@msg='msg'

msg(val){
console.log(val,'val')
}

通过方法接收

运行，点击回复父组件

打印结果：

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_43923808/article/details/105482954
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2021-05-24 10:13:02
阅读 ( 515 )
分类：前端

Vue组件是什么？Vue组件的使用

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看