vue组件化

最新推荐文章于 2024-03-18 08:42:31 发布

grt要一直一直努力呀

最新推荐文章于 2024-03-18 08:42:31 发布

阅读量164

点赞数

分类专栏：前端入门文章标签： vue html 前端

本文链接：https://blog.csdn.net/qq_44870115/article/details/118638902

版权

前端入门专栏收录该内容

26 篇文章 1 订阅

订阅专栏

将一个页面拆分成一个个小的功能块(组件)，每个功能块完成属于自己这部分独立的功能，则整个页面的管理和维护就比较容易了。

组件化是vue.js中的重要思想。可以开发出一个个独立可复用的小组件来构造应用。所有的应用最后都会被抽象成一个组件树。可以把已经写好的组件拿到新项目或者页面的开发中。

组件使用的三个步骤：

创建组件构造器
注册组件
使用组件

组件component

vue组件化的基本使用

PS：在es6里面，字符串除了可以使用单引号、双引号，还可以使用··（就是tab键上面的那个）。这种新增的情况可以使字符串多行显示。

<!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.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
    <div id="app">
        <!-- 3、使用组件 -->
        <my-cpn></my-cpn>
    </div>
    <script>
        // 1、创建组件构造器
       const cpnc =  Vue.extend({
           template: `<div>
            <h2>标题</h2>
            <P>这是一个段落</p>
            <P>这是另一个段落</p>
            </div>`
       })
        // 2、注册组件 第一个参数为组件的标签名，第二个参数是所创建的组件
        Vue.component('my-cpn',cpnc)
        var vm=new Vue({
           el: '#app',
           data: {},
           computed: {},
           methods: {}
        })
    </script>
</body>

</html>

在这里插入图片描述

全局组件和局部组件

PS:vue脚手架VueCLI（帮助创建项目的）

在上一个例子中，使用的就是全局组件。全局组件是指可以在多个vue的实例下使用。但实际开发一般还是只有一个vue实例。

局部组件是指在vue实例中创建。vue实例中的属性，除了data，methods，computed，还有components。

在开发中，使用较多的还是局部组件。

<!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.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
    <div id="app">
        <!-- 3、使用组件 -->
        <mycpn></mycpn>
    </div>
    <!-- 可以发现，此时局部组件在这里不起作用 -->
    <div>
        <mycpn></mycpn>
    </div>
    <script>
        // 1、创建组件构造器
       const cpnc =  Vue.extend({
           template: `<div>
            <h2>标题</h2>
            <P>这是一个段落</p>
            <P>这是另一个段落</p>
            </div>`
       })
        // 2、注册组件 通过此种方式注册的就是全局组件
        // Vue.component('my-cpn',cpnc)
        var vm=new Vue({
           el: '#app',
           data: {},
           computed: {},
           methods: {},
        //    下面就是局部组件的注册方式,第一个是使用组件时的标签名，cpnC就是组件构造器
           components: {
               mycpn: cpnc
           }
        })
    </script>
</body>

</html>

在这里插入图片描述

父组件与子组件

<!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.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
    <div id="app">
        <!-- 3、使用组件 -->
        <mycpn2></mycpn2>
    </div>
    <script>
        // 1、创建组件构造器
        const cpnc1 =  Vue.extend({
           template: `
            <div>
            <h2>标题1</h2>
            <P>这是一个段落1</p>
            <P>这是另一个段落1</p>
            </div>`
       })
       const cpnc2 =  Vue.extend({
           template: `
            <div>
            <h2>标题2</h2>
            <P>这是一个段落2</p>
            <P>这是另一个段落2</p>
            <mycpn1></mycpn1>
            </div>`,
            // 在这里注册了组件1，下面vue实例中注册了组件2  cpn2为父组件，cpn1为子组件。在这里注册的组件1，只能在这里使用，在上面div里不能使用。
            components: {
               mycpn1: cpnc1
           }
       })
        // 2、注册组件 
        var vm=new Vue({
           el: '#app',
           data: {},
           computed: {},
           methods: {},
        //    下面就是局部组件的注册方式,第一个是使用组件时的标签名，cpnC就是组件构造器
           components: {
               mycpn2: cpnc2
           }
        })
    </script>
</body>

</html>

在这里插入图片描述

注册组件的语法糖写法

<!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.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
    <div id="app">
        <!-- 3、使用组件 -->
        <mycpn1></mycpn1>
        <mycpn2></mycpn2>
    </div>
 
    <script>
        // 1.1、创建和注册全局组件的语法糖
       Vue.component('mycpn1',{
           template: `<div>
            <h2>标题1</h2>
            <P>这是一个段落1</p>
            <P>这是另一个段落1</p>
            </div>`
       })
    //    1.2、创建和注册局部组件的语法糖
        var vm=new Vue({
           el: '#app',
           data: {},
           computed: {},
           methods: {},
           components: {
               mycpn2: {
                 template: `<div>
                    <h2>标题2</h2>
                    <P>这是一个段落2</p>
                    <P>这是另一个段落2</p>
                    </div>`
       }
           }
             })
    </script>
</body>

</html>

在这里插入图片描述

组件模板templat的抽离

方法一：

<!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.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
    <div id="app">
        <!-- 3、使用组件 -->
        <mycpn1></mycpn1>
        <mycpn1></mycpn1>
        <mycpn1></mycpn1>
        <mycpn2></mycpn2>
     <script type="text/x-template" id="cpn1">
        <div>
            <h2>标题1</h2>
            <P>这是一个段落1</p>
            <P>这是另一个段落1</p>
        </div>
     </script>
   </div>
   <script>
        // <!-- 1.1、创建和注册全局组件的语法糖 -->
       Vue.component('mycpn1',{
           template: '#cpn1'
       })
        // <!-- 1.2、创建和注册局部组件的语法糖 -->
        var vm=new Vue({
           el: '#app',
           data: {},
           computed: {},
           methods: {},
           components: {
               mycpn2: {
                 template: `<div>
                    <h2>标题2</h2>
                    <P>这是一个段落2</p>
                    <P>这是另一个段落2</p>
                    </div>`
       }
           }
             })
    </script>
</body>

</html>

在这里插入图片描述
方法二：使用template标签

<!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.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
    <div id="app">
        <!-- 3、使用组件 -->
        <mycpn1></mycpn1>
        <mycpn1></mycpn1>
   </div>
   <template id="cpn1">
        <div>
            <h2>标题1</h2>
            <P>这是一个段落1</p>
            <P>这是另一个段落1</p>
        </div>
   </template>
   <script>
        // <!-- 1.1、创建和注册全局组件的语法糖 -->
       Vue.component('mycpn1',{
           template: '#cpn1'
       })
        // <!-- 1.2、创建和注册局部组件的语法糖 -->
        var vm=new Vue({
           el: '#app',
           data: {},
           computed: {},
           methods: {},
           components: {
               mycpn2: {
                 template: `<div>
                    <h2>标题2</h2>
                    <P>这是一个段落2</p>
                    <P>这是另一个段落2</p>
                    </div>`
       }
           }
             })
    </script>
</body>

</html>

在这里插入图片描述

组件数据的存放

可以发现组件模板里的内容都是写死的，无法改变的。组件内部是不能访问vue实例中的数据的。vue组件内部应该有自己保存数据的地方。应该在vue.component里面。但此时data不是对象，应该是一个function。并且需要返回值。组件很像一个vue实例，也有methods。

<!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.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
    <div id="app">
        <!-- 3、使用组件 -->
        <mycpn1></mycpn1>
        <mycpn1></mycpn1>
   </div>
   <template id="cpn1">
        <div>
            <h2>{{title}}</h2>
            <P>这是一个段落1</p>
            <P>这是另一个段落1</p>
        </div>
   </template>
   <script>
        // <!-- 1.1、创建和注册全局组件的语法糖 -->
       Vue.component('mycpn1',{
           template: '#cpn1',
           data() {
               return{
                   title: 'abc'
               }
           }
       })
        // <!-- 1.2、创建和注册局部组件的语法糖 -->
        var vm=new Vue({
           el: '#app',
           data: {},
           computed: {},
           methods: {},
           components: {
               mycpn2: {
                 template: `<div>
                    <h2>标题2</h2>
                    <P>这是一个段落2</p>
                    <P>这是另一个段落2</p>
                    </div>`
       }
           }
             })
    </script>
</body>

</html>

在这里插入图片描述

grt要一直一直努力呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
vue组件化

将一个页面拆分成一个个小的功能块(组件)，每个功能块完成属于自己这部分独立的功能，则整个页面的管理和维护就比较容易了。组件化是vue.js中的重要思想。可以开发出一个个独立可复用的小组件来构造应用。所有的应用最后都会被抽象成一个组件树。可以把已经写好的组件拿到新项目或者页面的开发中。组件使用的三个步骤：创建组件构造器注册组件使用组件组件componentvue组件化的基本使用PS：在es6里面，字符串除了可以使用单引号、双引号，还可以使用··（就是tab键上面的那个）。这种新增的情况可以
复制链接

扫一扫