阿菜的Vue学习之旅（八）

最新推荐文章于 2024-06-13 23:47:14 发布

kokunka

最新推荐文章于 2024-06-13 23:47:14 发布

阅读量192

点赞数 1

分类专栏： Vue 文章标签： vue.js 前端框架

本文链接：https://blog.csdn.net/kokunka/article/details/124183466

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

阿菜的Vue学习之旅（八）

1.组件化开发

当我们在编写前端代码时，发现有一些代码样式是可以重复复用的。那么，为了避免低效，可以将这些内容抽离出来，作为一个个的组件。

实现组件化，我们需要了解2个全局API：Vue.extend() 、Vue.component()

在这里插入图片描述

具体的代码实现：

<body>
    <div id="myDemo">
       <!--3.使用组件-->
        <my-fruit></my-fruit>
    </div>

    <script src="../js/vue.js"></script>
    <script type="text/javascript">
        // 1.创建组件构造器
        const fruit = Vue.extend({
            template: `
               <div>
                    <h2>水果</h2>
                    <ul>
                        <li>苹果 5元/斤</li>
                        <li>香蕉 2.5元/斤</li>
                        <li>雪梨 3元/斤</li>
                    </ul>
                </div>`
        })

        // 2.注册组件
        Vue.component('my-fruit', fruit)

        const mydemo = new Vue({
            el: '#myDemo',
            data: {
                message: "你好啊"
            }
        })
    </script>
</body>

运行结果：
在这里插入图片描述

2.全局组件和局部组件

全局组件：所有 vue 实例中都可以使用的组件
局部组件：只能在当前对象中使用的组件

具体的代码实现：

 <div id="myDemo1">
        <global-component></global-component>
        <!--定义在myDemo1内部的该局部组件能显示-->
        <part-component></part-component>
    </div>

    <div id="myDemo2">
        <global-component></global-component>
        <!--该局部组件未在myDemo2注册，不能显示-->
        <part-component></part-component>
    </div>

    <script src="../js/vue.js"></script>
    <script type="text/javascript">
        // 1.创建组件构造器
        const globalComponent = Vue.extend({
            template: `
            <div>
                <h2>我是标题</h2>
            </div>
            `
        })

        const partComponent = Vue.extend({
            template: `
                <div>
                    <p>我是文段我是文段我是文段我是文段</p>
                </div>
            `
        })

        // 2.注册全局组件 Vue.component('自定义组件名', 组件构造器名)
        Vue.component('globalComponent', globalComponent);

        const myDemo1 = new Vue({
            el: '#myDemo1',
            components: {
                // 3.注册局部组件  自定义组件名：组件构造器
                partComponent: partComponent
            }
        })

        const myDemo2 = new Vue({
            el: '#myDemo2'
        })
    </script>

运行结果：
在这里插入图片描述

3.父组件和子组件

将某段代码封装成一个组件，而这个组件又在另一个组件中引入，而引入该封装的组件的文件叫做父组件，被引入的组件叫做子组件。

具体的代码实现：

  <div id="myDemo">
        <father-component></father-component>
    </div>

    <script src="../js/vue.js"></script>
    <script type="text/javascript">
        // 1.创建组件构造器
        const sonComponent = Vue.extend({
            template:
                `<div>
                    <p>我是一位孝顺的儿子</p>
                </div>
                `
        })

        const fatherComponent = Vue.extend({
            template:
                `<div>
                    <h2>我是一位慈祥的父亲</h2>
                    <son-component></son-component>
                </div>
                `,
            components: {
                sonComponent: sonComponent
            }
        })

        // 2.注册父组件和子组件
        Vue.component('fatherComponent', fatherComponent);

        const myDemo = new Vue({
            el: '#myDemo'
        })
    </script>

运行结果：
在这里插入图片描述

4.注册组件的语法糖写法

上面注册组件的方式可能有些繁琐，因此Vue提供了注册的语法糖来解决这个过程。
语法糖主要省略了Vue.extend()的步骤，直接使用一个对象来代替。

具体的代码实现：

 <div id="myDemo">
        <cpn></cpn>
        <cpn2></cpn2>
        <cpn3></cpn3>
    </div>

    <script src="../js/vue.js"></script>
    <script type="text/javascript">
        // 全局组件
        // 1.创建组件构造器的方法（即Vue.extend()方法）已经被包含在了组件的注册方法里了
        Vue.component('cpn', {
            template: `
                <div>
                    <h2>莫愁前路无知己</h2>
                </div>
            `
        })

        // 局部组件 注意自定义组件名是否加''都可以
        const myDemo = new Vue({
            el: '#myDemo',
            components: {
                'cpn2': {
                    template: `
                        <div>
                            <h2>天下谁人不识君</h2>
                        </div>
                    `
                },
                cpn3: {
                    template: `
                        <div>
                            <p>只有技术练扎实了，就能看到光明且可爱的未来了</p>
                        </div>
                    `
                }
            }
        })
    </script>

运行结果：
在这里插入图片描述

5.组件模板抽离的2种写法

即使有了Vue组件注册的语法糖，但是它的template模板写的比较麻烦。因此可以将其内部的HTML分离出来，再挂载到对应的组件上。

写法1：使用< script >标签，加上type = “text/x-template”
写法2：使用< template >标签

具体的代码实现：

 <div id="myDemo">
    <cpn1></cpn1>
    <cpn2></cpn2>
    <cpn3></cpn3>
  </div>

  <!-- 组件模板抽离的写法1： -->
  <script type="text/x-template" id="myCpn1">
    <div>
      <h2>我喜欢的歌手</h2>
      <p>陈奕迅</p>
    </div>
  </script>

  <!-- 组件模板抽离的写法2： -->
  <template id="myCpn2">
    <div>
      <h2>我喜欢的歌曲</h2>
      <p>《葡萄成熟时》</p>
    </div>
  </template>

  <script src="../js/vue.js"></script>
  <script type="text/javascript">
    // 注册全局组件
    //在template处写上对应的id
    Vue.component('cpn1', {
      template: '#myCpn1'
    })

    // 注册局部组件
    const myDemo = new Vue({
      el: '#myDemo',
      components: {
       'cpn3': {
         template: '#myCpn1'
       },
        'cpn2': {
         template: '#myCpn2'
        }
      }
    })
  </script>