Vue组件

最新推荐文章于 2024-07-25 11:00:49 发布
最新推荐文章于 2024-07-25 11:00:49 发布
阅读量62 收藏
点赞数
分类专栏： vue.js 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43996260/article/details/123722274
版权

一、创建Vue组件的四种方式

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="bootstrap-3.4.1-dist/vue.min.js"></script>
</head>

<body>
    <div id='app'>
        <tem1></tem1>
        <tem2></tem2>
        <tem3></tem3>
        <tem4></tem4>
    </div>
    <script id="tem3" type="x-template">
    <h2>这是第三种方式</h2>
</script>
    <template id="tem4">
        <div>
            这是第四种方式，我在body中
        </div>
    </template>
    <script>
        //1
        var tem = Vue.extend({
            template: '<h2>这是第一种方式</h2>'
        })
        // Vue.component("组件名称"，组件内容)
        Vue.component("tem1", tem)

        //2
        Vue.component('tem2', {
            template: '<h2>我是第二种方式</h2>'
        })

        //3.

        Vue.component('tem3', {
            template: "#tem3",
        })

        //4

        Vue.component('tem4', {
            template: "#tem4",
            data() {
                return {

                }
            },
            methods: {

            }
        })
        const vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            }
        })
    </script>
</body>

</html>

二、切换组件

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="bootstrap-3.4.1-dist/vue.min.js"></script>
</head>

<body>
    <div id='app'>
        <father></father>
        <son></son>
    </div>
    <template id="father">
        <div>
            父组件
        </div>
    </template>
    <template id="son">
        <div>
            子组件
        </div>
    </template>
</body>
<script>
    Vue.component('father', {
        template: '#father',
        data() {
            return {

            }
        },
        methods: {

        }
    })
    Vue.component('son', {
        template: '#son',
        data() {
            return {

            }
        },
        methods: {

        }
    })
    const vm = new Vue({
        el: '#app',
        data: {
        },
        methods: {
        }
    })
</script>

</html>

三、组件的切换

使用:is属性来切换不同的子组件，并添加切换动画

组件实例定义方式：

// 登录组件

  const login = Vue.extend({
    template: `<div>
      <h3>登录组件</h3>
    </div>`
  });
  Vue.component('login', login);
​
  // 注册组件
  const register = Vue.extend({
    template: `<div>
      <h3>注册组件</h3>
    </div>`
  });
  Vue.component('register', register);
​
  // 创建 Vue 实例，得到 ViewModel
  var vm = new Vue({
    el: '#app',
    data: { comName: 'login' },
    methods: {}
  });

使用component标签，来引用组件，并通过:is属性来指定要加载的组件：

<div id="app">

<a href="#" @click.prevent="comName='login'">登录</a>
  <a href="#" @click.prevent="comName='register'">注册</a>
  <hr>
  <transition mode="out-in">
    <component :is="comName"></component>
  </transition>
</div>

添加切换样式：

<style>

.v-enter,
  .v-leave-to {
    opacity: 0;
    transform: translateX(30px);
  }

  .v-enter-active,
  .v-leave-active {
    position: absolute;
    transition: all 0.3s ease;
  }
​  h3{
    margin: 0;
  }
</style>

四、slot插槽

什么是插槽？

插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。

五、具名插槽

<template id="course">
   //定义
   <slot name="header"></slot>
     
</template>
<template v-slot:footer>
   //使用             
   课程底部
            
</template>

六、父组件传值子组件

  1. 接受父组件传值

设置props属性就可以接受父组件传值

示例：

// html部分

<son :parent-msg='msg' :list='list'></son>

<template id='myComTemp'>

    <div>

        <button @click='changeMsg'>修改parentMsg</button>

        <h1>你好{{parentMsg}}</h1>

        <ul>

            <li v-for='item in list'>{{item.name}}</li>

        </ul>

    </div>

</template>

// 组件定义部分

var vm = new Vue({

    el: '#app',

    components: {

        son: {

            template: '#myComTemp',

            // 定义父组件传过来的值

            props: ['parentMsg', 'list']

        }

    }

})

  1. 设置传递类型

props: {

     // 规定了父组件只能传对象类型

     prop1:Object

// 可以设置多个类型，可以传Number也可以传String

  parentMsg: [Number, String],

list: {

            // 设置类型

type: Array,// [Array,String]

// 设置默认值的时候必须使用函数，原理和data必须使用函数是一样的

default: function () {

return [{

name: '这个一个默认的名字'

}]

}

},

}

  1. 属性的继承和传递

属性继承的特征：

父组件的属性会覆盖子组件的属性

class 和 style 会进行合并，不会覆盖

设置禁用继承

加在子组件上的属性，使用了这个属性之后会阻止组件继承父组件的属性，但是class和style除外

inheritAttrs: false

在组件内可以使用$attrs获取父组件传过来的属性

示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <style>

        .parent-class {

            background-color: bisque;

            color: red

        }

        .son-class {

            color: aquamarine

        }

    </style>

</head>

<body>

    <div id='app'>

        <!-- 如果想传递一个非字符串类型，必须用数据绑定的方式 -->

        <!--

            属性继承的特征：

                父组件的属性会覆盖子组件的属性

                class 和 style 会进行合并，不会覆盖

        -->

        <!-- 通过这种方式就可以为子组件设置一些属性 -->

        <son :parent-msg='msg' required class="parent-class" name='fuzujian'></son>

    </div>

    <template id='myComTemp'>

        <div name='zizujian' class='son-class'>

            <button @click='changeMsg'>修改parentMsg</button>

            <input type="text" :name='$attrs.name' >

            <h1>你好{{parentMsg}}</h1>

            <ul>

                <li v-for='item in list'>{{item.name}}</li>

            </ul>

        </div>

    </template>

    <script>

        var vm = new Vue({

            el: '#app',

            data: {

                msg: '这个父组件的数据',

                list: [{

                        name: '张三'

                    },

                    {

                        name: '李四'

                    },

                    {

                        name: '王五'

                    },

                ]

            },

            components: {

                son: {

                    template: '#myComTemp',

                    // 使用了这个属性之后会阻止组件继承父组件的属性，但是class和style除外

                    inheritAttrs: false,

                    data() {

                        return {

                            sonMsg: '你好'

                        }

                    },

                    methods: {

                        changeMsg() {

                            console.log(this.$attr)

                            console.log(this.parentMsg);

                        }

                    },

                    props: {

                        // 可以设置多个类型

                        parentMsg: [Number, String],

                        list: {

                            type: Array,

                            // 设置默认值的时候必须使用函数，原理和data必须使用函数是一样的

                            default: function () {

                                return [{

                                    name: '这个一个默认的名字'

                                }]

                            }

                        },

                    }

                }

            }

        })

    </script>

</body>

</html>

  1. 注意事项 

data和props的区别

data是组件私有的，props是父组件传过来的

data是可以修改的，props是只读的

喜欢吃丸子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue组件
weixin_45701868的博客
05-28 1万+
目录 1.Vue组件的定义、注册方式和模板使用 1.1 组件的定义 定义组件 定义组件名的方式有两种 1.2 组件的分类 1.3 引用模版 2. 组件间数据的通信 2.1 父子组件 2.2 组件间数据通信 2.2.1 子组件访问父组件的数据（父传子） 2.2.2 父组件访问子组件的数据（子传父） 2.2.3 非父子通信 2.2.4 总结组件之间的通讯 2.3 单向数据流 3.过滤器 过滤器分为两种 过滤器使用地方两个位置 全局过滤器 局部过滤器 4.路由 4.1 定
vue组件传值的13种方式
热门推荐
dan_seek的博客
10-19 5万+
vue组件传值 不写这篇文章，我自己都不知道我知道的vue组件传值的方式竟然有13种之多，其实静下来想想，常用的也有五六种。 1、父组件传给子组件 在子组件里定义一个props,即props:[‘msg’]，msg可以是对象也可以是基本数据类型 如果你想定义一个默认值，即 props:{msg: {type: String, default: ‘hello world’}}, 需要注意的是这种传值是...
vue组件如何被其他项目引用
01-19
自己写的vue组件怎么才能让其他人引用呢，或者是共用组件如何让其他项目引用。本文就粗细的介绍下，如有疑问欢迎共同讨论。在这里你能了解下如下知识点： 1. 如何发布一个包到npmjs仓库上 2.如何引用一个npm包，尤其...
VUE组件入门
04-10
VUE组件入门，很基础的ppt，入门的同学可以看下哦！！
vue组件培训ppt
01-09
vue组件培训ppt VUE组件基础、组件交互、路由、vuex等
vue 组件简介
10-15
主要介绍了vue组件的相关资料，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
vue组件编写之todolist组件实例详解
08-28
Vue 组件编写之 TodoList 组件实例详解 本文将详细介绍 Vue 组件编写之 TodoList 组件的实例讲解，主要包括组件注册、模板编写、样式设计、事件处理等方面的知识点。 组件注册 在 Vue 中，组件注册是指将一个组件...
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 456
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
Python Formulas模型以JSON格式文件导出导入
Humbunklung的专栏
07-23 263
Python Formulas库，JSON格式导出导入。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
exlink2012的专栏
07-25 292
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
前端三大主流框架Vue React Angular有何不同？
2401_85955297的博客
07-21 1444
前端三大主流框架Vue React Angular比较，前端三大主流框架Vue React Angular有何不同？
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 243
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
vue单页面 全屏 使用 screenfull 实现全屏（左侧菜单栏隐藏）
最新发布
m0_71835253的博客
07-25 407
vue单页面 全屏 使用 screenfull 实现全屏（左侧菜单栏隐藏）_vue在打开一个界面的时候隐藏侧边栏-CSDN博客
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 253
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
VUE中的重点*
qq_61132537的博客
07-22 970
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
Vue的模板编译：深入理解渲染函数与预编译模板
哎 你看的博客
07-22 1073
Vue.js 是一个用于构建用户界面的渐进式框架，它的核心特性之一是其响应式和声明式的模板语法。Vue 的模板不仅仅是简单的字符串插值，它们会被编译成渲染函数，这个过程涉及到将模板字符串转换成 JavaScript 代码。本文将深入探讨 Vue 的模板编译过程，并讨论如何使用预编译模板来提高应用性能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值