Vue组件

最新推荐文章于 2025-03-09 10:09:01 发布

原创最新推荐文章于 2025-03-09 10:09:01 发布 · 159 阅读

0 ·

CC 4.0 BY-SA版权

创建组件的方式

方式1:

1.1使用Vue.extend来创建全局的Vue 组件

var com1 = Vue.extend({

template: “<h3、>这是使用 Vue.extend 创建的组件” // 通过template属性,指定了组件要展示的html 结构

})

1.2使用Vue.component(‘组件的名称’,创建出来组件模板对象)

如果是用Vue.component定义全局组件的,组件名称使用了驼峰命名 ,则在引用组件的时候,需要把大写的驼峰改为小写的字母

同时两个单词之间使用 - 进行连接

如果不使用驼峰,则直接拿名称来使用即可

Vue.component第一个参数组件的名称,将来在引用组件的时候,就是以一个标签的形式来引入他的

第二个参数: Vue.extend 创建的组件,其中template就是组件将来要展示的html内容

Vue.component(“myCom1”,Vue.extend({

template:"<h3>这是使用 Vue.extend 创建的组件</h3>"

}))

方式2:

Vue.component(“mycom2”,{

注意:无论是哪种方式创建出来的组件,组件的template属性指向的模板内容,必须有且只能有唯一的根元素

template:'<h3>这是直接使用Vue.conponent创建出来的组件</h3>'

})

还是通过标签的形式引入自己的标签

方式3;

Vue.component(“mycom3”,{

template:'#tmpl'

})

在被控制的#app外边使用template元素,定义组件的模板结构

<h1、>这是通过component 元素在外部定义的组件结构,这个方式有代码的智能提示和高亮

在Vue实例内部的components来定义实例内部私有组件

组件切换

方式1:


<div id="app">

    <a href=""@click.prevent ="flag = true">登录</a>

    <a href=""@click.prevent ="flag = false">注册</a>

    <!-- v-if & v-else 只是适用于两个选项 —>

    <login v-if ="flag"></login>

    <register v-else="flag"></register>

</div>

Vue.component("login",{

template:"<h3>登录组件</h3>"

})

Vue.component("register",{

template:"<h3>注册组件</h3>"

})