AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

【Vue】学习笔记：Vue组件

2022-11-13 118
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【Vue】学习笔记：Vue组件

文末有我看的这个视频的链接。

目录

组件注册

全局注册

全局注册的组件可以在注册后用于任意实例或者组件中

Vue.component('组件名',{/*选项对象*/})

全局注册必须设置在跟Vue实例之前

实例

<div id="root">
      <input-search></input-search>
    </div>
    <script>
        Vue.config.productionTip=false//隐藏控制台提示
        Vue.component('input-search',{
            template:' <input class="control" type="text" placeholder="请输入要搜索的关键字">'
        })
        const vm = new Vue({
            el:'#root',
            data(){
             return{
             }
            }
        })  
        vm.$mount('#root')
    </script>

组件基础

组件命名规则

  • kebab-case:'my-component'
  • PascalCase:'MyComponent'
Vue.component('my-component-a',{/**/})
Vue.component('MyComponentB',{/**/})

无论使用哪种命名方式，在DOM中都只有第一种命名方式可以使用

<div id="root">
      <input-search></input-search>
      <just-play></just-play>
    </div>
    <script>
        Vue.config.productionTip=false//隐藏控制台提示
        Vue.component('input-search',{
            template:' <input class="control" type="text" placeholder="请输入要搜索的关键字">'
        })
        Vue.component('JustPlay',{
            template:'<a href="https://mllt.cc">Just play</a>'
        })
        const vm = new Vue({
            el:'#root',
            data(){
             return{
             }
            }
        })  
        vm.$mount('#root')
    </script>

q3.png

‍

template选项

该选项用于设置组件的结构，最终被引入根实例或者其他组件中

单项数据流

父子组件间所有prop数据应当存储在data中后操作

<div id="root">
      <my-component :initial-title="title"></my-component>
    </div>
    <script>
        Vue.config.productionTip=false//隐藏控制台提示
        Vue.component('my-component',{
            props:['initialTitle'],
            template:`
            <div>{{title}}</div>
            `,
            data(){
                return {
                    title:this.initialTitle
                }
            }
        });
        const vm = new Vue({
            el:'#root',
            data(){
             return{
                 title:"Just Play?"
             }
            }
        })  
        vm.$mount('#root')
    </script>

q2.png

<div id="root">
      <my-component :initial-title="title"></my-component>
    </div>
    <script>
        Vue.config.productionTip=false//隐藏控制台提示
        Vue.component('my-component',{
            props:['initialTitle'],
            template:`
            <div>{{title}}
                <button @click="fn">按一下</button>
                </div>
            `,
            data(){
                return {
                    title:this.initialTitle
                }
            },
            methods:{
                fn(){
                    console.log(this);
                    this.title="It's new title"
                }
            }
        });
        const vm = new Vue({
            el:'#root',
            data(){
             return{
                 title:"Just Play?"
             }
            }
        })  
        vm.$mount('#root')
    </script>

如果prop为数组或对象时，子组件操作将会影响到父组件的状态

<div id="root">
      <my-component 
      :initial-title="title" 
      :obj="obj"></my-component>
    </div>
    <script>
        Vue.config.productionTip=false//隐藏控制台提示
        Vue.component('my-component',{
            props:['initialTitle','obj'],
            template:`
            <div>{{title}}
                <button @click="fn">按一下</button>
                </div>
            `,
            data(){
                return {
                    title:this.initialTitle
                }
            },
            methods:{
                fn(){
                    console.log(this);
                    // this.title="It's new title"
                    this.obj.name="萌狼蓝天";
                }
            }
        });
        const vm = new Vue({
            el:'#root',
            data(){
             return{
                 title:"Just Play?",
                 obj:{
                     name:"xiaoming",
                     age:18,
                 }
             }
            }
        })  
        vm.$mount('#root')
    </script>

q1.png

‍

data选项

data选项用于存储组件的数据，与根实例不同，组件的data选项必须为函数，数据设置在返回值对象中

<div id="root">
      <my-com-a></my-com-a>
    </div>
    <script>
        Vue.config.productionTip=false//隐藏控制台提示
        Vue.component('MyComA',{
            template:`
            <div>
                <h3>{{title}}</h3>
                <p>{{content}}</p>
            </div>
            `,
            data(){
                return{
                    title:'Biao ti ya',
                    content:"nei rong ya"
                }
            }
        })
        const vm = new Vue({
            el:'#root',
            data(){
             return{
             }
            }
        })  
        vm.$mount('#root')
    </script>

这种喷那个实现方式为了确保每个组件实例可以维护一份被返回对象的独立拷贝，不会相互影响

局部注册

局部注册的组建只能用在当前实例或组件中

<div id="root">
      <my-com-a></my-com-a>
      <my-com-b></my-com-b>
    </div>
    <script>
        Vue.config.productionTip=false//隐藏控制台提示
        const vm = new Vue({
            el:'#root',
            data(){
             return{
             }  
            },
             components:{
                'MyComA':{
                    template:`
                        <div>
                            <h3>{{title}}</h3>
                            <p>{{content}}</p>
                        </div>
                    `, 
                    data(){
                        return{
                            title:'Biao ti ya',
                            content:"nei rong ya"
                        }
                    }
                },
                'MyComB':{
                    template:`
                        <div>
                            <h3>{{title}}</h3>
                            <p>{{content}}</p>
                        </div>
                    `, 
                    data(){
                        return{
                            title:'Biao ti ya2',
                            content:"nei rong ya2"
                        }
                    }
                },
             }
        })  
        vm.$mount('#root')
    </script>

单独配置组件的选项对象

var MyComponentA={/*……*/}
var MyComponentB={/*……*/}
new Vue({
  el:'#app',
  components:{
    'my-component-a':MyComponentA,
    'my-component-b':MyComponentB,
  }
});

ES6对象属性简写

new Vue({
  el:'#app',
  components:{
    MyComponentA,
    MyComponentB
  }
});

q4.png

<div id="root">
        <my-com-a></my-com-a>
        <my-com-b></my-com-b>
    </div>
    <script>
        Vue.config.productionTip = false //隐藏控制台提示
        var MyComA = {
            template: `
                <div>
                    <h3>{{title}}</h3>
                    <p>{{content}}</p>
                </div>
            `,
            data() {
                return {
                    title: 'Biao ti ya',
                    content: "nei rong ya"
                }
            }
        };
        var MyComB = {
            template: `
                <div>
                    <h3>{{title}}</h3>
                    <p>{{content}}</p>
                </div>
            `,
            data() {
                return {
                    title: 'Biao ti ya2',
                    content: "nei rong ya2",
                }
            }
        };
        const vm = new Vue({
            el: '#root',
            data() {
                return {}
            },
            components: {
                'MyComA': MyComA,//写法1
                MyComB,//写法2
            }
        })
        vm.$mount('#root')
    </script>

‍

<div id="root">
        <!-- 静态属性设置 -->
        <my-component-a
        title="静态标题"
        content="静态内容"
        ></my-component-a>
        <!-- 动态属性绑定 -->
        <my-component-a
        v-bind:title="'zhe shi jing tai biao ti'"
        :content="'zhe sh jing tai nei rong'"
        ></my-component-a>
        <!-- 动态属性绑定常用操作 -->
        <my-component-a
        :title="item.title"
        :conent="item.content"
        ></my-component-a>
    </div>
    <script>
        Vue.config.productionTip=false//隐藏控制台提示
        //创建子组件
        Vue.component('my-component-a',{
            props:['title','content'],
            template:`
            <div>
                <h3>{{title}}</h3>
                <p>{{content}}</p>
            </div>
            `
        })
        const vm = new Vue({
            el:'#root',
            data(){
             return{
                 item:{
                    title:'Biaoti',
                    content:'neirong',
                 }  
             }
            }
        })  
        vm.$mount('#root')
    </script>

组件通信

在组件间传递数据的操作，称为组件通信

父组件向子组件传值

组件传值

通过子组件的props选项接收父组件的传值

Vue.component('my-component'，{
  props:['title'],
  template:'<h2>{{title}}</h2>'
})

注意：props不要与data存在同名属性

父组件设置如下

<div id="app">
  <my-component title="例1"></my-component>
  <my-component :title="例2"></my-component>
  <my-component :title="item.title"></my-component>
</div>
new Vue({
  el:'#app',
  data:{
    item:{
      title:'父组件中的数据'
    }
  }
})

Props命名规则

建议prop命名使用cameCase，父组件绑定时使用kebab-case

<div id="root">
      <my-component
      :item-title='item.title'
      :item-content="item.content"
      ></my-component>
    </div>
    <script>
       Vue.config.productionTip=false//隐藏控制台提示
       Vue.component('my-component',{
           props:['itemTitle','itemContent'],
           template:`
                 <div>
                    <h3>{{itemTitle}}</h3>
                    <p>{{itemContent}}</p>
                </div>
           `
       })
        const vm = new Vue({
            el:'#root',
            data(){
             return{
                 item:{
                     title:'Biao Ti is',
                     content:'Nei Rong is'
                 }
             }
            }
        })  
        vm.$mount('#root')
    </script>

练习：通过v-for创建组件

<div id="root">
      <!-- 通过v-for遍历数据items，创建组件并生成内容 -->
      <demo-item
          v-for="item in items"
          :item-title="item.title"
          :item-content="item.content"
          :key = "item.title"
          :item="item"
      ></demo-item>
    </div>
    <script>
        Vue.config.productionTip=false//隐藏控制台提示
        Vue.component('demoItem',{
            props:['itemTitle','itemContent','item'],
            template:`
                <div>
                    <h3>{{itemTitle}}</h3>
                    <p>{{itemContent}}</p>
                </div>
            `
        })
        const vm = new Vue({
            el:'#root',
            data(){
             return{
                items:[
                    {
                        title:'Biao Ti is',
                        content:'Nei Rong is'
                    },
                    {
                        title:'Biao Ti is2',
                        content:'Nei Rong is2'
                    },
                    {
                        title:'Biao Ti is3',
                        content:'Nei Rong is3'
                    }
                ]
             }
            }
        })  
        vm.$mount('#root')
    </script>

子组件向父组件传值

组件传值

子向父传值需要通过自定义事件实现

例如：商品为子组件，购物车为父组件，父组件需要统计商品个数，就需要在子组件个数变化时传值给父组件。

q3.png

q2.png

<div id="root">
      <product-item
      v-for="product in products"
      :key = "product.id"
      :title="product.title"
      ></product-item>
    </div>
    <script>
        Vue.config.productionTip=false//隐藏控制台提示
        Vue.component('ProductItem',{
            props:['title'],
            template:`
            <div>
                <span>商品名称:{{title}},商品个数:{{count}}</span>
                <button @click="countIns">+1</button>
                <button @click="countInsf">-1</button>
            </div>
            `,
            data(){
                return{
                    count:0
                }
            },
            methods:{
                countIns(){
                    this.count++;
                },
                countInsf(){
                    if(this.count<=0) alert("已经清空啦")
                    else this.count--;
                },
            }
        })
        const vm = new Vue({
            el:'#root',
            data(){
             return{
               products:[
                   {
                       id:1,
                       title:'苹果11斤'
                   },
                   {
                       id:2,
                       title:'香蕉12斤'
                   },
                   {
                       id:3,
                       title:'橙子13斤'
                   },
               ],
               totalCount:0  
             }
            }
        })  
        vm.$mount('#root')
    </script>

子组件数据变化时，通过$emit()触发自定义事件

Vue.component('product-item',{
  ……
  methods:{
    countIns(){
    this.$emit('count-change');
    this.count++;
    }
  }
});

自定义事件名称建议使用kebab-case

父组件监听子组件的自定义事件，并设置处理程序

<div id="app">
  ……
  <product-item
  ……
  @count-change = "totalCount++"
  ></product-item>
  ……
</div>

q1.png

<div id="root">
      <product-item
      v-for="product in products"
      :key = "product.id"
      :title="product.title"
      @count-change-add="totalCount++"
      @count-change-jianshao="totalCount--"
      ></product-item>
    <p>商品总数为：{{totalCount}}</p>
    </div>
    <script>
        Vue.config.productionTip=false//隐藏控制台提示
        Vue.component('ProductItem',{
            props:['title'],
            template:`
            <div>
                <span>商品名称:{{title}},商品个数:{{count}}</span>
                <button @click="countIns">+1</button>
                <button @click="countInsf">-1</button>
            </div>
            `,
            data(){
                return{
                    count:0
                }
            },
            methods:{
                countIns(){
                    this.$emit('count-change-add');
                    this.count++;
                },
                countInsf(){
                    if(this.count<=0) alert("已经清空啦")
                    else{
                        this.$emit('count-change-jianshao');
                        this.count--;
                    }
                },
            }
        })
        const vm = new Vue({
            el:'#root',
            data(){
             return{
               products:[
                   {
                       id:1,
                       title:'苹果11斤'
                   },
                   {
                       id:2,
                       title:'香蕉12斤'
                   },
                   {
                       id:3,
                       title:'橙子13斤'
                   },
               ],
               totalCount:0  
             }
            }
        })  
        vm.$mount('#root')
    </script>

自定义事件传值

子组件触发事件时可以向父组件传值

‍

非父子组件传值

非父子组件：兄弟组件或完全无关的两个组件

‍

其他通信方式

组件插槽

内置组件

观看的教程链接

【白嫖】3小时带你搞定 Vue 组件 - 拉勾教育出品_哔哩哔哩_bilibili

文章标签：
JavaScript
存储
关键词：
VUE.js组件
vue学习笔记VUE.js
学习笔记VUE.js
VUE.js学习笔记
学习笔记组件VUE.js
萌狼蓝天
目录
相关文章
34789737
|
5月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中，兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线，大型项目建议使用Pinia等状态管理工具，确保数据流清晰可控，避免内存泄漏。
34789737
514 2
哇塞女孩
|
4月前
|
缓存 JavaScript
vue中的keep-alive问题（2）
vue中的keep-alive问题（2）
哇塞女孩
430 137
谢妹纸
|
8月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
谢妹纸
983 0
rvblio6ca4cug
|
7月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎，秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」，成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构，实现设计到代码全流程自动化，效率提升300%，助力企业降本增效，引领“设计即生产”新时代。
rvblio6ca4cug
569 1
34789737
|
7月前
|
JavaScript 安全
在 Vue 中，如何在回调函数中正确使用 this？
在 Vue 中，如何在回调函数中正确使用 this？
34789737
395 0
小宋1021
|
10月前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
小宋1021
1220 4
我们是幸福一家人
|
8月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
我们是幸福一家人
442 82
34789737
|
9月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑，结合D3强大的数据可视化能力，实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展（如节点类型定制、连接样式优化等），并提供了性能优化方案以应对大数据量场景。最终，展示了基础网络拓扑、实时更新拓扑等应用实例，为开发者提供了一套完整的实现思路和实践经验。
34789737
1270 78
游客tsrksm3mlhq4y
|
10月前
|
缓存 JavaScript 前端开发
Vue 基础语法介绍
Vue 基础语法介绍
游客tsrksm3mlhq4y
427 57
34789737
|
8月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件，包括基础与高级示例。组件支持分段配置（如颜色、文本）、动画效果及超出进度提示等功能。同时提供了完整的代码实现，支持全局注册，并提出了优化建议，如主题支持、响应式设计等，帮助开发者更灵活地集成和定制进度条组件。资源链接已提供，适合前端开发者参考学习。
34789737
599 17