Vue之组件详解

2024-04-02 19:04:59 590人浏览独家记忆

摘要

在这里插入图片描述


<body>
    <div id="root">
        <h2>{{name}}</h2>
        <hr>
        <school></school>
        <hr>
        <student></student>
        <hr>
        <!-- <h2>学生姓名：{{name}}</h2>
        <h2>学生年龄：{{age}}</h2> -->
    </div>
    <div id="root2">
        <hello></hello>
    </div>
    <script>
        Vue.config.productionTip = false;
        //创建school组件
        //el:'#root'
        //组件定义时 一定不要写el配置项，因为最终所有的组件都要被一个vm管理 由vm决定服务于哪个容器
        const school = Vue.extend({
            template: `
            <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
               <button @click="showName">点我提示学校名称</button>
                </div>
           `,
            data() {
                return {
                    schoolName: '二中',
                    address: '北京',
                }
            },
            methods: {
                showName() {
                    alert(this.schoolName)
                }
            }
        })
        //第一步：创建组件
        //创建学生组件
        const student = Vue.extend({
            template: `
         <div>  
        <h2>学生姓名：{{name}}</h2>
        <h2>学生年龄：{{age}}</h2>
        </div>
           `,
            data() {
                return {
                    name: '小王',
                    age: 20,
                }
            }
        })
        //创建vm
        new Vue({
            el: '#root',
            data: {
                name: '你好，世界！'
            },
            //第二步：注册组件(局部注册)
            components: {
                school,
                student
            }
        })

        const hello = Vue.extend({
            template: `
            <div><h2>你好鸭！王同学</h2></div>
            `
        })
        Vue.component('hello', hello)
        new Vue({
            el: '#root2'
        })
    </script>
</body>

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注编程网的更多内容!

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Vue之组件详解

本文链接: https://www.lsjlt.com/news/157900.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

Vue之组件详解

<body> <div id="root"> <h2>{{name}}</h2> ...

99+

2024-04-02
Vue组件开发之异步组件详解

目录一、引入二、vue中的异步组件三、异步组件和suspense总结一、引入我们在讲异步组件之前，我们再来回顾一下webpack打包时的分包操作。我们可以使用import()异步加...

99+

2024-04-02
Vue组件化学习之scoped详解

目录简介总结简介主要介绍scoped的作用。先弄一个案例： main.js： //引入vue依赖 import Vue from 'vue' //引入组件App import ...

99+

2024-04-02
Vue之组件的自定义事件详解

目录总结 <template> <div > <h2>{{msg}}</h2> <!-- 通过父组件给...

99+

2024-04-02
详解Vue组件复用和扩展之道

目录概述扩展组件是否必要slot（插槽）JavaScript 工具函数扩展组件的几种模式Composition APImixin高阶组件无渲染组件模板扩展概述软件编程有一个重要的原...

99+

2024-04-02
Vue之插件详解

总结本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注编程网的更多内容! ...

99+

2024-04-02
Vue组件之间的数据共享详解

目录一、在项目开发中，组件之间的最常见的关系分为如下两种：1.1父子组件之间的数据共享1. 父->子共享数据2.子->父共享数据1.2兄弟组件之间的数据共享总结一、在项目...

99+

2024-04-02
详解Vue全局组件的挂载之实现弹窗组件

目录vue组件挂载类型组件挂载代码示例1.vue.extend()方法2.render函数挂载vue组件挂载类型 vue中组件的挂载分为两种类型： vue.extend() rend...

99+

2022-11-13

Vue组件挂载弹窗 Vue组件挂载 Vue弹窗组件 Vue 弹窗
Vue之vue-tree-color组件实现组织架构图案例详解

目录npm安装loaderImport Plugins开始排列方式折叠展示点击节点其他功能npm # use npm npm install vue-tree-color 安装...

99+

2024-04-02
Vue组件之间四种通信方式详解

目录前言父子组件通信父组件与子孙组件的通信父组件获取子组件数据无需考虑组件关系的通信前言 vue 框架提供了前端开发组件的思想，可以通过组件来组合成一个完整的页面，都是随着组...

99+

2024-04-02
Springcloud之Gateway组件详解

目录1.网关1.1 网关简介1.2 网关组件1.2.1 Gateway介绍1.2.2 Gateway实践1.2.3 Gateway执行流程1.2.4 断言工厂1.2.5 过滤器1.网...

99+

2023-05-19

Springcloud Gateway组件 Springcloud Gateway Springcloud组件
Vue组件之间的通信方式详细讲解

目录前言一、父级传数据给子级1、传输固定的具体数据2、动态语法3、子组件调用父组件二、子级传数据给父级1、使用自定义事件2、$refs的使用3、同级别组价以及任意组件之间的数据传递前...

99+

2024-04-02
vue移动端项目vant组件库之tag详解

目录vant组件库之tagtag标签选中(类型选择,分类选择)vant组件库之tag 直接上代码 <template> <div class="pd50">...

99+

2024-04-02
详解vue组件之间相互传值的方式

目录概述一、父组件向子组件传值二、子组件向父组件传值1.子组件绑定一个事件，通过 this.$emit() 来触发2.通过 callback 函数3. 通过 $parent / $c...

99+

2024-04-02
Vue子组件与父组件详细解析

目录一、父组件和子组件二、模板分离写法1、template标签2、text/x-template三、父子组件通信-父传子1、Prop 类型四、父子组件通信子传父1、vm.$emit(...

99+

2024-04-02
vue组件historyApiFallback作用详解

本篇博客主要是详细总结一下vue中的historyApiFallback的作用。当我们在浏览器中输入一个网址(比如说是：http://www.edit.com),此时会经过dns解...

99+

2024-04-02
详解Vue的组件注册

引言一个 Vue 组件在使用前需要先被“注册”，这样 Vue 才能在渲染模板时找到其对应的实现。组件注册有两种方式：全局注册和局部注册。全局注册我们...

99+

2023-05-18

Vue 组件 Vue 组件注册
vue components 动态组件详解

目录总结总结数组发生变化时，动态加载相应数据场景：点击不同组件名称，界面显示相应组件步骤一：导入所需组件步骤二：点击 tab 选项卡，将对应组件名添加进数组步骤三：使用动态组...

99+

2024-04-02
详解Angular组件之投影

目录概述一、简单例子1、子组件中使用<ng-content>指令来标记投影点2、父组件中把要投影到子组件的投影点的html片段写到子组件的标签中二、多个<ng-co...

99+

2024-04-02
Vue组件之事件总线和消息发布订阅详解

目录简介事件总线消息的发布订阅总结简介主要介绍事件总线的定义和编写方法和Vue是如何实现消息的订阅与发布的。事件总线事件总线是组件间通信的一种方式，适用于任意组件间的通信，比如...

99+

2024-04-02