Vue之组件详解

<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>

总结

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

赞 (0)

相关推荐

  • vue图片拖拉转放大缩小组件使用详解

    vue图片拖拉转放大缩小组件使用详解

    vue图片拖拉转放大缩小组件的具体使用方法,供大家参考,具体内容如下 <doc> 图片组件 - 用户放大缩小以及拖拽 </doc> <template> <div style="width: 100%;position: relative;overflow: hidden;text-align: center;border: 1px solid #f1f2f3;"> <el-button size='mini' @click=&qu

  • vue中router-view组件的使用详解

    vue中router-view组件的使用详解

    在开发vue项目中经常需要实现一个页面里面可以切换着展现不同的组件页面 例如:下图中通过点击侧边栏不同的组件路由到不同的组件页,而侧边栏和顶部部分是不变的,切换的只是组件页面. 这个时候我们就需要用到 路由中的 router-view组件(也叫路由占位符) 了 首先我们来到 需要切换不同组件页的页面 ,在自己需要的位置 添加 router-view组件 Home.vue <template> <!--头部区域--> <el-header> <div> <

  • vue组件通信的多种方法详解

    vue组件通信的多种方法详解

    目录 1. 父传子 2. 子传父 3. 非父子组件传值 4. vuex 5. refs 6. $children 7. $parent 8. provide & inject 9. $attrs 10. $listeners 总结 说起组件通信,可能大家耳熟能详的有以下5种: 1. 父传子 父组件通过自定义属性给子组件传值,子组件用props接收 2. 子传父 父组件在子组件标签上自定义事件,子组件通过$emit来触发自定义事件,并且可以传递参数 3. 非父子组件传值 eventBus事件总线:

  • vue components 动态组件详解

    目录 总结 总结 数组发生变化时,动态加载相应数据 场景:点击不同组件名称,界面显示相应组件 步骤一:导入所需组件 步骤二:点击 tab 选项卡,将对应组件名添加进数组 步骤三:使用动态组件,:is 属性绑定组件名 <div v-for="(item, index) in componentData" :key="index"> <components :is="item.componentName"/> </div

  • vue3 父子组件传值详解

    现在距离vue3的诞生已经过了很长时间了,笔者也是近期才开始学习vue3.对比vue2来看,vue3在写法发生了不小的变化,最典型的例子就是vue3通过ref,或者reactive实现数据的响应式.因为ref和reactive的出现,使得vue3中父子组件的传值方式也发生了变化 咱们先看下vue2中的写法 父组件: <!-- 父组件 --> <template> <div> <children :title="title" @getChildr

  • Vue之组件的自定义事件详解

    Vue之组件的自定义事件详解

    目录 总结 <template> <div > <h2>{{msg}}</h2> <!-- 通过父组件给子组件传递函数类型的数据props实现:子给父传递数据 --> <School :getName="getName"/> <Student :getStudentname="getStudentname"/> <!-- 通过父组件给子组件绑定一个自定义事件:实现子给父传递数据

  • Vue之组件详解

    Vue之组件详解

    <body> <div id="root"> <h2>{{name}}</h2> <hr> <school></school> <hr> <student></student> <hr> <!-- <h2>学生姓名:{{name}}</h2> <h2>学生年龄:{{age}}</h2> --> &

  • 基于Vue单文件组件详解

    基于Vue单文件组件详解

    本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素. 这种方式在很多中小规模的项目中运作的很好,在这些项目里 JavaScript 只被用来加强特定的视图.但当在更复杂的项目中,或者前端完全由 JavaScript 驱动的时候,下面这些缺点将变得非常明显: 1.全局定义 (Global definitions) 强制要求每个 compon

  • vue设计一个倒计时秒杀的组件详解

    简介: 倒计时秒杀组件在电商网站中层出不穷  不过思路万变不离其踪,我自己根据其他资料设计了一个vue版的 核心思路: 1.时间不能是本地客户端的时间  必须是服务器的时间这里用一个settimeout代替 以为时间必须统一 2.开始时间,结束时间通过父组件传入,当服务器时间在这个开始时间和结束时间的范围内  参加活动按钮可以点击,并且参加过活动以后不能再参加, 3.在组件创建的时候 同步得到现在时间服务时间差,并且在这里边设置定时器,每秒都做判断看秒杀是否开始和结束, 4.在更新时间的函数中是

  • vue组件详解之使用slot分发内容

    vue组件详解之使用slot分发内容

    一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer></app-footer> </app> 当需要让组件组合使用,混合父组件的内容与子组件的模板时,就会用到slot , 这个过程叫作内容分发( transclusion ). 注意两点: 1.< app>组件不知道它的挂载点会有什么内容.挂载点的内容是由<app >

  • Vue.js之mixins混合组件详解

    Vue.js之mixins混合组件详解

    混合以一种灵活的方式为组件提供分布复用功能.混合对象可以包含任意的组件选项.当组件使用了混合对象时,混合对象的所有选项将被"混入"组件自己的选项中. 一.Mixins的基本用法 现在有个数字点击递增的程序,假设已经完成了,这时我们希望每次数据变化时都能够在控制台打印出提示:"数据发生变化". 代码实现过程: <div id="app"> <p>num:{{ num }}</p> <P><but

  • vue.js 动态组件详解

    vue.js 动态组件详解

    :is 动态组件 使用 v-bind:is="组件名",会自动去找匹配的组件名,如果没有,则不显示: <div id="app"> <test v-bind:is="which_to_show"></test> </div> <script> var demo = new Vue({ el: "#app", data: { which_to_show: "f

  • vue封装一个弹幕组件详解

    vue封装一个弹幕组件详解

    目录 前言 功能实现 1.获取随机颜色 随机数生成 随机颜色编码生成 2.随机生成弹幕出现的高度坐标 3.格式化弹幕对象 颜色 定位 4.创建弹幕对象 滚动动画定义 创建弹幕dom对象实例 弹幕销毁 弹幕循环 5.实时弹幕发送 html JavaScript 源码地址 前言 现在很多地方都有使用到弹幕,最近在捣鼓自己的个人博客网站,也想着在里面加入一个弹幕模块,所以在这里封装了一个可复用的弹幕组件,目前已经实现了基本的功能,可能还会有存在缺陷,后续会继续优化.这里给大家介绍分享一下实现的过程.

  • Vue 2阅读理解之initRender与callHook组件详解

    目录 initRender 组件渲染初始化 callHook('beforeCreate') initRender 组件渲染初始化 在 initEvents 事件系统初始化完成之后,紧接着的就是组件实例的渲染部分的初始化 initRender. initRender 函数定义位于 src/core/instance/render.ts 文件内,基本定义如下: export function initRender(vm: Component) { vm._vnode = null vm._stat

  • Vue transition过渡组件详解

    Vue transition过渡组件详解

    目录 一.vue里面的transition组件 二.transition组件应用CSS过渡 (1)单元数/组件过渡 (2)多个元素过渡 (3)多个组件过渡 (4)列表过渡 三.JavaScript钩子 一.vue里面的transition组件 Vue提供了这个transition组件,可以使得在v-if条件渲染.v-show条件显示.动态组件的时候可以给到任意元素和组件添加了进入或离开元素过渡. 二.transition组件应用CSS过渡 在应用css过渡的时候,transition组件会在恰当

  • Vue自定义事件(详解)

    前面的话 父组件使用props传递数据给子组件,子组件怎么跟父组件通信呢?这时,Vue的自定义事件就派上用场了.本文将详细介绍Vue自定义事件 事件绑定 每个 Vue 实例都实现了事件接口 (Events interface),即 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 [注意]Vue 的事件系统分离自浏览器的EventTarget API.尽管它们的运行类似,但是 $on 和 $emit 不是addEventListener 和 disp

随机推荐