前端 Vue框架学习实例（九）

最新推荐文章于 2022-11-25 18:52:46 发布

自足的猿

最新推荐文章于 2022-11-25 18:52:46 发布

阅读量134

点赞数

分类专栏： Vue学习文章标签： vue.js

本文链接：https://blog.csdn.net/zhshuzi/article/details/119177735

版权

Vue学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.组件的注册

创建组件构造器 Vue.extend()
注册组件 Vue.component()
使用组件

<body>
    <div id="app">
        <!-- 3.使用组件 -->
        <my-cpn></my-cpn>
        <my-cpn></my-cpn>
        <my-cpn></my-cpn>
        <my-cpn></my-cpn>
    </div>
    <script src="../vue.js"></script>
    <script>
        // 1.创建组件构造器对象
        const cpnC = Vue.extend({
                template: `
            <div>
            <h2>我是标题</h2>
            <p>我是内容，呵呵呵呵</p>
            <p>我是内容，哈哈哈哈</p>
            </div>
            `
            })
            // 2.注册组件
        Vue.component('my-cpn', cpnC)
        const app = new Vue({
            el: '#app',
            data: {

            }
        })
    </script>
</body>

2.全局组件与局部组件

如上个例子，所注册的组件是全局组件，意味着可以在多个Vue的实例下面使用。

如何注册一个局部组件？

components属性，如下：

 const app = new Vue({
            el: '#app',
            data: {

            },
            components: {
                cpn2: cpnC2
            }
        })

3.父组件和子组件

父组件包含子组件

<body>
    <div id="app">
        <cpn2></cpn2>
    </div>
    <script src="../vue.js"></script>
    <script>
        // 1.创建一个组件构造器（子组件）
        const cpnC1 = Vue.extend({
            template: `<div>
            <h2>我是标题</h2>
            <p>我是内容，我是子组件</p>
            </div>`
        })

        // 2.创建第二个组件构造器（父组件）
        const cpnC2 = Vue.extend({
            template: `<div>
            <h2>我是标题</h2>
            <p>我是内容，我是父组件</p>
            <cpn1></cpn1>
            </div>`,
            components: {
                cpn1: cpnC1

            }
        })

        const app = new Vue({
            el: '#app',
            data: {

            },
            components: {
                cpn2: cpnC2,
                cpn1: cpnC1
            }
        })
    </script>
</body>

4.语法糖注册组件

组件模板的分离写法

<template id="cpn">此处组件的标签</template>

<body>
    <div id="app">
        <cpn></cpn>
    </div>
    <template id="cpn">
        <div>
            <h2>
                {{title}}
            </h2>
            <p>我是内容，哈哈哈哈</p>
        </div>
    </template>
    <script>
        //1.注册一个全局组件
        Vue.component('cpn', {
            template: '#cpn', //分离写法
            data() {
                return {
                    title: 'abc'
                }
            }
        })
        const app = new Vue({
            el: '#app',
            data: {

            }
        })
    </script>
</body>