vue学习（三） vue组件

最新推荐文章于 2024-05-15 10:07:30 发布
最新推荐文章于 2024-05-15 10:07:30 发布
阅读量511 收藏 1
点赞数
分类专栏： vue学习 文章标签： vue vue组件 vue-slot vue组件模板
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sJohnny/article/details/56680482
版权

组件

一个大的对象；

定义代码：

    <div id="box">
        <bc></bc>   
    </div>
    <hr>
    <script>
        var aaa = Vue.extend({
            template: 'This is a vue 全局组件。'
        })
        Vue.component('bc',aaa);
        new Vue({
            el: '#box',
            data: {

            },
            methods: {

            }
        })
    </script>

效果：

这里写图片描述

全局组件

全局下定义的组件

通过Vue.extend({})来定义组件的模板，再通过vue.component(‘name’，module)来绑定，在html中就可以直接使用

可以直接通过vue.component('name',obj)的方式来声明 方式二的声明方式

ps: **component不能使用实例的data ，但是可以在component 使用data 声明变量，data的使用只能使用函数形式数据的翻译形式只能是json的格式**

    <div id="box">
        <qj1></qj1>
        <hr>
        <qj2></qj2> 
        <hr>
        <qj3></qj3>
    </div>
    <hr><br><br>
    <div id="box2">
        <qj3></qj3>
    </div>

    <!--这里是不会有显示的，因为并没有挂载vue。 正确理解全局的含义 -->
    <qj3></qj3>
    <script>
        var aaa = Vue.extend({
            template: 'This is a vue 全局组件1。'
        })
        Vue.component('qj1',aaa);

        var bbb = Vue.extend({
            template: '{{msg}}',
            //component不能使用实例的data ，但是可以在component 使用data 声明变量，data的使用只能使用函数形式
            // 数据的翻译形式只能是json的格式
            data: function (){
                return {
                    msg: '全局组件2，数据由data返回。'
                }
            }
        })
        Vue.component('qj2',bbb)

        Vue.component('qj3',{
            template: 'This is a vue 全局组件3.{{msg}}',
            //component不能使用实例的data ，但是可以在component 使用data 声明变量，data的使用只能使用函数形式
            // 数据的翻译形式只能是json的格式
            data: function(){
                return {
                    msg: '数据来自与自定义的数据，由data返回，data必须是函数。'
                }
            }
        })

        new Vue({
            el: '#box',
            data: {
            },
            methods: {
            }
        })

        new Vue({
            el: '#box2',
            data: {
            },
            methods: {
            }
        })
    </script>
正确理解全局的意思。 只有在挂载了vue的地方，去使用组件，都是ok的。

局部组件

局部组件，声明方式和全局类似，只是定义在了一个vue实例对象里面

    <div id="jb1">
        <jb1></jb1><br><hr>
        <jb2></jb2><br><hr>
        <jb3></jb3>
    </div>

    <script>
        var jb1 = Vue.extend({
            template: 'This is 局部组件. <strong>{{msg}}</strong>',
            data: function (){
                return {
                    msg: '局部组件，数据信息1。'
                }
            }
        })
        var jb2 = Vue.extend({
            template: 'This is 局部组件. <strong>{{msg}}</strong>',
            data: function (){
                return {
                    msg: '局部组件，数据信息2。'
                }
            }
        })

        new Vue({
            el: '#jb1',
            components: {
                'jb1': jb1,
                'jb2': jb2,
                'jb3': {
                    template: '局部组件3.{{msg}}',
                    data: function (){
                        return {
                            msg: '数据信息3'
                        }
                    }
                }
            }
        })

    </script>

配合模板使用

如果template里面的内容过多的话，可以使用模板来进行调用。为template设置一个id值绑定到模板

模板的创建方式有两种：
    1：通过 script+id+type  <script type="x-template" id="zjmb1">xxx</script>
    2：通过 template标签+id  <template id='aaa'>xxx</template>

    <div id="zjmb">
        <zjmb1></zjmb1>
        <br><br><hr>
        <zjmb2></zjmb2>

    </div>

    <script type="x-template" id="zjmb1">
        <h1>组件配合模板使用</h1>
        <p>{{msg}}</p>
        <button @click="show()">clickMe</button>
    </script>

    <template id="zjmb2">
        <h1>组件配合模板使用2</h1>
        <p>{{msg}}</p>
        <button @click="show()">clickMe</button>
    </template>
    <script>
        new Vue({
            el: '#zjmb',
            components: {
                zjmb1: {
                    template: '#zjmb1',
                    data(){
                        return {
                            msg: '数据是组件模板的数据。'
                        }
                    },
                    methods: {
                        show(){
                            alert('组件配合模板使用。')
                        }
                    }
                },
                zjmb2: {
                    template: '#zjmb2',
                    data(){
                        return {
                            msg: '组件配合模板使用2。另外一种方式创建'
                        }
                    },
                    methods: {
                        show(){
                            alert('组件配合模板使用2。另外一种方式创建')
                        }
                    }
                }
            }
        })
    </script>

动态组件

    格式:  <component :is="组件名称"></component>
    通过点击button来改变aaa，进而根据aaa的不同，实现组件更换

    <div id="dtzj">
        <input type="button" value="dtzj1" @click="aaa='dtzj1'" />
        <input type="button" value="dtzj2" @click="aaa='dtzj2'" />
        <componemt :is='aaa'></componemt>
    </div>
    <template id='dtzj1'>
        <h1>动态组件1</h1>
        <p>{{msg}}</p>
    </template>
    <script>
        new Vue({
            el:'#dtzj',
            data:{
                aaa:'dtzj1'
            },
            components:{
                'dtzj1':{
                    template:'#dtzj1',
                    data(){
                        return {
                            msg: '动态组件数据',
                        }
                    },
                    methods:{
                        show(){
                            alert('动态组件方法')
                        }
                    }
                },
                'dtzj2':{
                    template:'<h1>动态组件2</h1>',
                }
            }
        })
    </script>

父子组件

即组件里面套组件

    <div id="fzzj">
        <fzzj1></fzzj1>
    </div>
    <template id='fzzj1'>
        <h1>父子组件1</h1>
        <p>This is 父子组件。</p>
        <hr>
        <fzzjchild></fzzjchild>
    </template>
    <script>
        //父子组件
        new Vue({
            el: '#fzzj',
            data: {
            },
            components: {
                'fzzj1': {
                    template:'#fzzj1',
                    components: {
                        'fzzjchild': {
                            template: '<h2>父子组件的子组件</h2>'
                        }
                    }
                }
            }
        })
    </script>

效果：

这里写图片描述

子组件无法获取父组件数据，需要经过处理才能获取到

    <!--这里子组件是不能获取到父组件的数据的-->
    <div id="fzzj">
        <fzzj1></fzzj1>
    </div>
    <template id='fzzj1'>
        <h1>父子组件1</h1>
        <p>This is 父子组件。</p>
        <p>{{msgF}}</p>
        <hr>
        <fzzjchild></fzzjchild>
    </template>
    <script>
        //父子组件
        new Vue({
            el: '#fzzj',
            data: {
            },
            components: {
                'fzzj1': {
                    template:'#fzzj1',
                    data(){
                        return {
                            msgF: "这是父组件的数据。"
                        }
                    },
                    components: {
                        'fzzjchild': {
                            template: '<h2>父子组件的子组件</h2><p>{{msgZ}}</p><p>父组件数据：{{msgF}}</p>',
                            data(){
                                return {
                                    msgZ: "这是子组件的数据。"
                                }
                            },
                        }
                    }
                }
            }
        })
    </script>

这里写图片描述

处理：
    在调用子组件：    <bbb :m="数据"></bbb>
    子组件之内:
                    props:['m','myMsg']   // 多个数据，用逗号隔开就好
                    props:{               // 如果以对象的形式，这种表示 ‘数据’：数据类型
                        'm':String,
                        'myMsg':Number
                    }

    <div id="fzzj">
        <fzzj1></fzzj1>
    </div>
    <template id='fzzj1'>
        <h1>父子组件1</h1>
        <p>This is 父子组件。</p>
        <p>{{msgF}}</p>
        <hr>
        <fzzjchild :msg='msgF' :msg2='msgF2' :my-msg='msgF3'></fzzjchild>
    </template>
    <script>
        //父子组件
        new Vue({
            el: '#fzzj',
            data: {
            },
            components: {
                'fzzj1': {
                    template:'#fzzj1',
                    data(){
                        return {
                            msgF: "这是父组件的数据。",
                            msgF2: '父组件数据2.',
                            msgF3: 333
                        }
                    },
                    components: {
                        'fzzjchild': {
                            // props: ['msg','msg2'], // 有多条数据的或，用逗号隔开。
                            // 如果是以对象的实行，则后面的表示数据类型
                            props: {
                                'msg': String,
                                'msg2': String,
                                'myMsg': Number,
                            },
                            template: '<h2>父子组件的子组件</h2><p>{{msgZ}}</p><p>父组件数据：{{msg}}</p><p>父组件数据2：{{msg2}}</p><p>父组件数据3：{{myMsg}}</p>',
                            data(){
                                return {
                                    msgZ: "这是子组件的数据。"
                                }
                            },
                        }
                    }
                }
            }
        })
    </script>

这里写图片描述

父组件也是无法获取到子组件的数据的，同样需要做处理。

*子组件把自己的数据，发送到父级
                            vm.$emit(事件名,数据);
                            v-on:   @

上面的案例，继续更改，得到父组件可以获取到子组件的数据

<div id="fzzj">
        <fzzj1></fzzj1>
    </div>
    <template id='fzzj1'>
        <h1>父子组件1</h1>
        <p>This is 父子组件。</p>
        <p>{{msgF}}</p>
        <p>子组件的数据： {{msgZ1}}</p>
        <hr>
        <fzzjchild :msg='msgF' :msg2='msgF2' :msg3='msgF3' @msg-z="get"></fzzjchild>
    </template>
    <script>
        //父子组件
        new Vue({
            el: '#fzzj',
            data: {
            },
            components: {
                'fzzj1': {
                    template:'#fzzj1',
                    data(){
                        return {
                            msgF: "这是父组件的数据。",
                            msgF2: '父组件数据2.',
                            msgF3: 333,
                            msgZ1: 111,
                        }
                    },
                    methods: {
                        get(msg) {
                            this.msgZ1 = msg;
                        }
                    },
                    components: {
                        'fzzjchild': {
                            // props: ['msg','msg2'], // 有多条数据的或，用逗号隔开。
                            // 如果是以对象的实行，则后面的表示数据类型
                            props: {
                                'msg': String,
                                'msg2': String,
                                'msg3': Number,
                            },
                            template: '<h2>父子组件的子组件</h2><p>{{msgZ}}</p><p>父组件数据：{{msg}}</p><p>父组件数据2：{{msg2}}</p><p>父组件数据3：{{msg3}}</p><button @click="send()">send</button>',
                            data(){
                                return {
                                    msgZ: "这是子组件的数据。"
                                }
                            },
                            methods: {
                                send(){
                                    this.$emit('msg-z',this.msgZ);
                                }
                            }
                        }
                    }
                }
            }
        })
    </script>
vm.$dispatch(事件名,数据)   子级向父级发送数据
vm.$broadcast(事件名,数据)  父级向子级广播数据
配合: event:{}
在vue2.0里面已经，报废了

slot

作用: 占个位置
类似ng里面 transclude  （指令）

代码解释：

    <div id="box">
        <aaa>
            <ul>
                <li>1111</li>
                <li>2222</li>
                <li>3333</li>
            </ul>
        </aaa>
    </div>

    <script>
        var vm=new Vue({
            el:'#box',
            data:{
                a:'aaa'
            },
            components:{
                'aaa':{
                    template:'<h1>xxxx</h1>'
                }
            }
        });

    </script>
当在使用组件的时候，组件内有其他内容填充，我们可以使用slot来占位，避免组件内的内容缺失不显示，因此我们可以在定义组件的时候，放上一些slot占位

<div id="box">
        <aaa>
            <ul>
                <li>1111</li>
                <li>2222</li>
                <li>3333</li>
            </ul>
        </aaa>
        <hr>
        <aaa>
        </aaa>
    </div>
    <template id="aaa">
        <h1>xxxx</h1>
        <slot>这是默认的情况</slot>
        <p>welcome vue</p>
    </template>

    <script>
        var vm=new Vue({
            el:'#box',
            data:{
                a:'aaa'
            },
            components:{
                'aaa':{
                    template:'#aaa'
                }
            }
        });

    </script>

效果：
这里写图片描述

又有情况会出现，如果组件里的内容过多，怎么确定slot的对应问题呢？
ps： 在组件中，为每一个slot增加一个name，在使用组件的时候，给对应填充的地方的根标签上加上slot=name 就ok

<div id="box">
        <aaa>
            <ul slot="ul-slot">
                <li>1111</li>
                <li>2222</li>
                <li>3333</li>
            </ul>
            <ol slot="ol-slot">
                <li>111</li>
                <li>222</li>
                <li>333</li>
            </ol>
        </aaa>
        <hr>
        <aaa>
        </aaa>
    </div>
    <template id="aaa">
        <h1>xxxx</h1>
        <slot name="ol-slot">这是默认的情况</slot>
        <p>welcome vue</p>
        <slot name="ul-slot">这是默认的情况2</slot>
    </template>

    <script>
        var vm=new Vue({
            el:'#box',
            data:{
                a:'aaa'
            },
            components:{
                'aaa':{
                    template:'#aaa'
                }
            }
        });

    </script>

效果：
这里写图片描述

sJohnny
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue（三）[引入组件]
weixin_44893500的博客
04-07 7955
App.vue引入全局组件 @符号 先说下vue项目中的@符号，我们在build/webpack.base.conf这个文件下可以看到webpack把@定义成 src 文件路径。 所以@符号跟vue没有什么关系，他是基于webpack的，有很多人把这个给误解了。 而 . 是代表绝对路径。 App.vue全局引入 App.vue是全局显示的组件，所以把组件引入到App显示每个页面都会有。 使用im...
前端笔记-使用vue绑定id使得组件更加灵活（在使用echarts时常用）
IT1995的博客
08-08 7191
目录 基本概念 代码与实例 基本概念 这个问题是在我使用echarts时出现的，因为echarts有这样的一个函数（官方实例） let myChart = this.$echarts.init(document.getElementById(this.idStr)); 这样的画就需要div的id号，为了使得这个id比较灵活，可以使用vue的绑定:id或者v-bind...
vue查询组件——根据ID获取对象信息，指定属性显示
热门推荐
三生万物
11-03 1万+
需求 很多时候因对象关联，前端只收到一个关联对象的ID，或者枚举值。这个如果后台不处理的话前端往往需要根据ID再去后台查询获得对象数据显示对象信息（一般显示name）。因此这是一个很常见的操作，所以我们可以封装一个组件，让组件自动帮我们去查询。 开始做 新建 GetModelInfo.vue 文件 定义参数 包含 fdId（要查询的ID）、url（后台接口路径）、show（显示的字段）、attributes（要查询的属性） props: { fdId: { type: String,
Vue的学习 —— ＜vue组件＞
最新发布
2301_78038072的博客
05-15 1313
props: {自定义属性A: 类型,自定义属性B: 类型,……
vue组件名称的作用
weixin_50745161的博客
07-21 451
vue组件有个name 属性，那么这个name到底有什么作用呢 官方解答是这样的 看的似懂非懂 在实际的项目中有什么作用呢 1.当项目使用keep-alive时，可搭配组件name进行缓存过滤 举个例子： 我们有个组件命名为detail,其中dom加载完毕后我们在钩子函数mounted中进行数据加载 export default { name:'Detail' }， mounted(){ this.getInfo(); }， methods:{ getInfo(){ axios.ge
每日一学Vue脚手架中基础的ref属性与原生id区别
小淼淼的博客
09-21 2526
每日一学：Vue脚手架中基础的ref属性与原生id区别
Vue解决Echarts组件使用ID不能复用问题
pon的博客
08-30 1425
Vue echarts id 复用
学习Vue组件实例
11-29
Vue组件实例的学习是深入了解Vue框架的关键部分。Vue实例是每个Vue应用的核心，它是一个普通的JavaScript对象，但具备了Vue框架的特性和功能。当我们启动一个Vue项目时，通常从加载index.html开始，其中包含一个id为...
vue组件学习教程
08-29
学习 Vue 组件是掌握 Vue 框架的关键所在，本文将详细介绍 Vue 组件的学习教程，根据 Vue 官方文档学习的笔记，具有相当的参考价值。 一、注册组件 在 Vue 中，可以通过全局注册或局部注册两种方式来注册组件。...
Vue学习组件
08-10
在“Vue学习组件”中，我们将深入探讨Vue的组件系统、vue-router的使用，以及其他重要的Vue知识点。 首先，让我们从Vue的组件系统开始。组件是Vue的核心特性，它们是可复用的独立单元，可以视为小型的应用。每个...
详解vue引入子组件方法
12-08
通常，Vue组件位于src/components目录下，但也可以根据项目需求自定义路径。假设我们要在`Home`组件中引入名为`Header`的子组件，`Header.vue`应该被创建在相应的目录下，例如`src/pages`。 接下来，我们详细分析...
vue-unique-id-生成唯一的组件ID和组件范围HTML ID。-Vue.js开发
05-27
vue-unique-id Vue.js插件，可生成在表单输入，标签，jQuery插件等中使用的组件范围HTML标识符。这解决了问题vue-unique-id Vue.js插件，可为以下组件生成组件范围HTML标识符：用于表单输入，标签，jQuery插件等。这解决了在创建可重复使用的Vue组件（可在页面中多次实例化）时为DOM元素生成唯一HTML ID的问题。 另外，此插件还会为每个Vue.js组件生成一个唯一的id属性（默认情况下为uid）。 该插件没有外部依赖性。 通过npm安装（节点软件包管理器）$ npm install vue
Vue学习笔记（五）：深入了解组件（下）
qq_63978748的博客
03-10 973
首先我们在Search组件中使用v-model指令将input组件与Text双向绑定，为数据Text设置一个监听函数，每当Text内容更新时，就会触发监听函数，将变化后的新值通过$emit传递给Show组件，Show组件每次接收到全新的Text值就会触发我们的自定义事件，将对自己的Text进行更新，将其渲染在网页上。前面关于props的内容我们讲到，props传递的可以是字符串、数组、对象，实际上，他还能够传递函数，由于函数是能够携带参数的，借助这一特点，我们便能够实现子传父。这时我们就需要借助插槽了。
vue基础学习-组件
weixin_40017062的博客
06-05 1455
vue基础学习-组件
六十分钟入门vue组件（建议收藏）
m0_64875238的博客
10-16 1341
六十分钟入门vue组件（建议收藏）
vue的学习之路（Vue中组件(component )(1)，2024年是做Web前端开发人员的绝佳时机
2401_83974020的博客
04-10 281
1、传递以键值对的形式 定义在局部组件的调用处2、局部组件 核心：接收 props属性props:[传递数据时的键]注意：使用props属性接收的值 就相当于在data中定义对应的内容{key:value}{{msg}}template:‘’,data(){return {name:‘王恒杰’},methods:{change(){
Vue学习之组件基础学习
道阻且长
09-10 461
Vue学习之组件基础学习
vue添加id属性_Vue系列：Vuex
weixin_29816689的博客
01-30 3218
Vuexvuex是专门为vuejs开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。它具有响应式特性。使用安装npm install vuex --savestore目录的index.js(推荐该目录结构)中使用Vue.use(Vuex)，创建Vuex的对象store，导出store对象。import Vue from 'vue'import Vuex from 'vuex'...
Vue组件精讲
《Vue组件精讲》是一本关于Vue.js框架的前端开发技术小册，主要介绍了Vue.js组件的核心思想和使用技巧。作者在本小册中着重分享了自己在3年的Vue.js开发和两年的iView开源项目中所积累和沉淀的关于Vue.js组件的见解...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值