1. 全栈程序员必看首页

一小时入门vue组件（建议收藏）

全栈程序员-站长 • • 未分类 • 阅读 1

一小时入门vue组件（建议收藏）初识 vue 组件应用 包括 1 实例化多个 vue 对象 2 全局组件与局部组件 3 父向子传值 传引用 props 4 子向父事件传值 emit 5 使用脚手架创建项目并运用组件 and 传值的案例 欢迎小伙伴们一起交流学习

先来张柯基的图，给自己点鼓励?

在这里插入图片描述
初识组件应用
        实例化多个vue对象
        全局组件
                定义与使用
                data是一个函数
        局部组件
        父向子传值/传引用：props
                静态传值
                动态传值：v-bind
        子向父：事件传值$emit
使用脚手架创建项目并运用组件and传值






















初识组件应用

实例化多个vue对象

 
     <div id="vue-app-one">这里是：{ 
   {name}} 
      div>  
      <div id="vue-app-two"> <p>这里是：{ 
    {name}} 
       p><br> <button @click="changeName">change-one-name 
        button>  
         
         div> 
 // 第一个vue对象 var one = new Vue({ 
     el:"#vue-app-one", data:{ 
     "name":"ccy1" } }) // 第二个vue对象 var two = new Vue({ 
     el:"#vue-app-two", data:{ 
     "name":"ccy2" }, methods:{ 
     // 修改vue-app-one的name为'ccy333' changeName:function(){ 
     one.name = 'ccy333' } } })

效果：点击后修改”ccy1“为”ccy333“

在这里插入图片描述

全局组件

定义与使用

  • 定义全局组件，需给组件一个名字，调用时，将组件名当作标签名使用；相当于自定义标签，该标签下可以包含很多子html标签；
  • 这些子html标签定义在组件的template属性中，每次调用该组件，都渲染template里的标签
  • template里必须只有一个根元素
  • 在组件中，data是函数，将数据return回去
  • 依然可以用this来调用data中定义的数据

例子：

定义组件：

  • 当写成标签时，遇到有大写字母的命名，需要改成小写并用横杆链接前后两个部分，如定义组件时命名为myComponent，写成标签时应写成<my-component>；
  • 组件定义时也可以用横杆法命名；
  • 如果定义时用myComponent，标签用<my-component>是OK的，系统自动识别
// 自定义的全局组件my-component // template中只有一个根元素p标签，里面包含一个button按钮 Vue.component('my-component',{ 
     template:`
 我的名字是：{       {name}}  
`, data(){ 
     return { 
     name:'ccy' } }, methods:{ 
     changeName:function(){ 
     this.name = '安之' } } }) // vue对象1 new Vue({ 
     el:"#vue-app-one", }) // vue对象2 new Vue({ 
     el:"#vue-app-two", })

使用组件：

<div id="vue-app-one"> <my-component> 
      my-component> <my-component> 
       my-component>  
        div> <div id="vue-app-two"> <my-component> 
         my-component>  
          div>

效果：
在这里插入图片描述

data是一个函数

在vue对象中，data属性值是一个对象，比如这样的：

在这里插入图片描述
      但是在全局组件中，同一份data可能被多个vue对象使用，每个对象不单独维护一份data时，如果某一个vue对象修改了data中的一个变量，其他vue对象获取data时就会被影响；

      如果用上面的例子做案例，若组件中的data是对象（引用），其他地方均不改变，两个vue对象便共享同一个name变量；当我通过其中一个vue对象改变name数据时（即点击任一个btn按钮），另一个对象获得的name也发生了改变（其他按钮处的’ccy’也都被改成了’安之’）

      因此，为保证数据的独立性，即每个实例可以维护一份被返回对象的独立的拷贝，data为每个实例都return一份新创建的数据，不同的vue对象获取的data均互不影响

      在vscode中不允许组件中的data是对象，会报错：

      [Vue warn]: The “data” option should be a function that returns a per-instance value in component definitions.

局部组件

  • 局部组件注册在某个vue对象中，
  • 只有注册过该局部组件的vue对象才能使用这个局部组件
// template仅一个根元素：ul var msgComponent = { 
     // 数据是自身提供的 (hobbies) template:` 
     
     
      
  • { 
       {hobby}}
    •  
     
`, data(){ 
     return { 
     hobbies:['看剧','看动漫','吃好吃的'] } } }

注册局部组件：

// 仅由注册过该局部组件的vue对象才能使用，此处为div#vue-app-one // 注意命名规范，components中对象的key将会被作为标签名，多个单词拼接的命名需使用横杆法 // 可以写成msg-component，此处直接简化了命名为msg， new Vue({ 
     el:"#vue-app-one", components:{ 
     "msg": msgComponent } })

html文件中使用
：

<div id="vue-app-one"> <p>这里是vue-app-one 
      p> <mycomponent> 
       mycomponent> <mycomponent> 
        mycomponent> <p>我的爱好： 
         p> <msg> 
          msg>  
           
           div>

效果： 红框圈出的部分就是局部组件渲染出来的
在这里插入图片描述





父向子传值/传引用：prop

静态传值

创建子组件：

var titleComponent = { 
     props:["title"], template:`
{       {title}}
` // 所需要的数据title由父组件提供 }

在父组件的components属性中注册子组件：

new Vue({ 
     el:"#vue-app-one", components:{ 
     "msg": msgComponent, "titleComponent":titleComponent }, })

在父组件上使用子组件：

 
     <div id="vue-app-one"> <p>这里是vue-app-one 
      p> <mycomponent> 
       mycomponent> <mycomponent> 
        mycomponent>  
        <title-component title="我的爱好："> 
         title-component> <msg> 
          msg>  
           div>

效果：红框标记处就是父向子传值并展示

在这里插入图片描述

动态传值：v-bind

定义子组件：

var titleComponent = { 
     props:["title"], template:`
{       {title}}
` }

在父组件的components属性中注册子组件：

new Vue({ 
     el:"#vue-app-one", components:{ 
     "msg": msgComponent, "titleComponent":titleComponent }, data(){ 
     return { 
     title:"my hobbies are ", } } })

使用子组件，通过绑定父组件data中的变量title来实现动态传值：

 
     <div id="vue-app-one"> <p>这里是vue-app-one 
      p> <mycomponent> 
       mycomponent> <mycomponent> 
        mycomponent>  
        <title-component v-bind:title="title"> 
         title-component> <msg> 
          msg>  
           div>

效果：红框处就是动态绑定获取数据的展示
在这里插入图片描述
传递数组等复杂数据时，也可以使用v-bind来动态传值，如：
需要向子级传递hobbies数组，在vue实例对象（父）中创建数据hobbies：






new Vue({ 
     el:"#vue-app-one", components:{ 
     "msg": msgComponent, "titleComponent":titleComponent }, data:{ 
     title:"my hobbies are ", hobbies:['看剧','看动漫','吃好吃的'], //需要向子组件传递的数据 } })

定义子组件：

var msgComponent = { 
     template:` 
{       {hobby}}
 `, props:["hobby"], data(){ 
     return { 
     } } }

使用子组件：

 
     <div id="vue-app-one"> <p>这里是vue-app-one 
      p> <mycomponent name="ccy"> 
       mycomponent> <mycomponent name="ccy"> 
        mycomponent> <title-component v-bind:title="title"> 
         title-component>  
         <msg v-for="hobby in hobbies" v-bind:hobby="hobby" v-bind:key="hobby.id"> 
          msg>  
           div>

子向父：事件传值$emit

        子组件不能通过prop向父组件传递数据，需要使用事件向父组件抛出一个值，告知父组件我需要实现一个功能，由父组件处理这个事件

先在父组件的data中定义chinesename的初始值：

new Vue({ 
     el:"#vue-app-one", data:{ 
     chinesename:"anzhi" // chinesename初始值 } })

创建子组件，并注册事件change-name（就像click事件一样，需要让系统能够辨认这是一个事件并监听，当事件被触发时，执行某项约定好的操作）：

 Vue.component('blog-post', { 
     props: ['chinesename'], template: ` 
     
 
      
{ 
       { chinesename }}
 
       
     
 ` // blog-post组件包含一个h3，显示chinesename，和一个按钮 // 点击这个按钮，触发change-name事件，将"ruosu"作为参数传递给指定的处理函数onChangeName })

在父组件中使用子组件，定义change-name的处理函数为onChangeName：

<div id="vue-app-one"> <p>这里是vue-app-one 
      p>  
       
      <div id="blog-posts-events-demo"> <blog-post v-bind:chinesename='chinesename' v-on:change-name = "onChangeName" > 
       blog-post>  
        div>  
         div>

在父组件处定义事件处理函数onChangeName：

new Vue({ 
     el:"#vue-app-one", data:{ 
     chinesename:"anzhi" }, methods:{ 
     onChangeName:function(value){ 
     // 将chinesename换成传递过来的数据 this.chinesename=value } } })
一点想法

关于父子组件的区分，在此写一点总结，还是日后学了新知识再来填坑 ┗|｀O′|┛ 嗷~~

      官网中没有很明确指明两者的定义和区别，在网上搜了一圈，觉得比较多人认可并且好理解的是：

  • el指定的根元素为父组件（使用之处为父组件）
  • vue实例对象也可看做组件

在这里插入图片描述
在这里插入图片描述

      再用绕口令说一波，即：title-component组件定义处与使用处，两者身份是不一样的，在定义处，它是局部组件，也是子组件，需注册才能使用；在使用处，它是根元素的包含一部分，根元素为父组件，而“它”，承担着父组件与子组件数据沟通的重任

这个总结在全局组件情况下也适用，使用该全局组件的根元素是父组件，如上面的子向父传值的案例，div#vue-app-one是父组件，
作为父子组件沟通的桥梁，全局组件blog-post为子组件
跳转到子向父案例

如果是子组件又嵌套了子组件，被嵌套的组件是子子组件，以此类推

使用脚手架创建项目并运用组件and传值

如自定义博客页面：

  • 主页面由vue-app主组件构成，包含导航栏、中间部分、底部栏三部分
  • 导航栏由vue-header子组件完成
  • 中间内容按照功能划分
    • 添加博客：addBlob子组件
    • 显示博客：showBlob子组件
    • 修改博客：modifyBlob子组件
    • 点击显示单篇博客内容：singleBlob子组件
  • 底部信息栏由vue-footer完成
    除了主页面，其他子部分和组件均根据功能划分，辅助主页面展示

个人博客父向子传值的示意图如下：

  • 各个子功能由不同组件构成，拼成一个大一些的功能组件
  • 点击展示单篇博客和修改博客两个组件均需要从主页面获取博客id，才能进行相应展示和操作，这便是典型的父向子传值
    在这里插入图片描述
    好啦，本次分享就到这里啦，欢迎点赞、评论、收藏，谢谢支持~
    在这里插入图片描述









版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/212085.html原文链接：https://javaforall.net

赞 (0)
0 0

关于作者

全栈程序员-站长的头像

全栈程序员-站长

133.5K 文章
3 粉丝
本网站汇聚当前互联网主流语音，持续更新，欢迎关注公众号“全栈程序员社区”
上一篇 2026年3月18日 下午8:52
下一篇 2026年3月18日 下午8:53


相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号