Vue教程08(组件)

最新推荐文章于 2024-05-07 17:23:25 发布

yangsen159

最新推荐文章于 2024-05-07 17:23:25 发布

阅读量163

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/yangsen159/article/details/105486998

版权

vue 专栏收录该内容

18 篇文章 2 订阅

订阅专栏

Vue组件

组件是可复用的 Vue 实例，且带有一个名字。

1.通过extend方式

我们先通过最原始的方式来实现看看，首先通过Vue.extends方法来定义一个全局组件。template 就是组件将来要展示的HTML内容

 // 1.使用 Vue.extend 来创建全局的Vue组件
 var com1 = Vue.extend({
     template: "<h3>这是个Vue组件</h3>"
 })

然后通过Vue.component来添加我们的组件

// 2.使用 Vue.component('组件的名称', 创建出来的组件模板对象)
Vue.component("myCom",com1);

注意组件的名称如果采用的是驼峰命名法，那么在使用组件的时候大写必须改为小写而且要用 “-”连接。都是小写就没有关系了

当然上面的写法我们也看以简写为如下:

Vue.component("myCom",Vue.extend({
    template: "<h3>这是我们使用的另一个组件</h3>"
 }))

2.简写方式

第二种创建Vue组件的方式其实是在前面的基础上我们可以简写Vue.extend() 创建全局Vue组件的操作，如下

Vue.component("myCom",{
   template: "<h2> 第二种创建的方式  </h2>"
})

注意创建的组件HTML元素只能有一个root标签，如果有多个会报错，
用div括起来就可以了

3.template标签

在上面的例子中我们的组件元素都是直接在template中直接通过字符串来声明的，这种书写的时候没有智能提示，容易出现错误，这时我们可以通过标签来定义组件 HTML元素然后通过id来使用。具体如下:

<template id="com1">
   <div>
	   <h2> 第二种创建的方式234234  </h2>
	   <span>234234</span>
   </div>
</template>

Vue.component("myCom", {
	template: "#com1"
})

4.私有组件定义

上面我定义的都是全局的组件，接下来我们看看在单个Vue实例中定义私有的组件。

<!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="./lib/vue-2.4.0.js"></script>
</head>

<body>
    <div id="app">
        <my-com></my-com>
    </div>

    <template id="com1">
        <div>
        <h2> 第二种创建的方式234234  </h2>
        <span>234234</span></div>
    </template>
    <script>
        // Vue.component("myCom", {
        //     template: "#com1"
        // })
        var vm = new Vue({
            el: "#app",
            data: {

            },
            methods: {

            },
            components: { //定义私有组件
                myCom: {
                    template: "#com1"
                }
            }
        })
    </script>
</body>
</html>

yangsen159

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue教程08(组件)

Vue组件组件是可复用的 Vue 实例，且带有一个名字。1.通过extend方式我们先通过最原始的方式来实现看看，首先通过Vue.extends方法来定义一个全局组件。template 就是组件将来要展示的HTML内容 // 1.使用 Vue.extend 来创建全局的Vue组件 var com1 = Vue.extend({ template: "<h3>这是个V...
复制链接

扫一扫