17vue学习_最简单的父子组件

最新推荐文章于 2022-11-02 17:55:38 发布

chencaw

最新推荐文章于 2022-11-02 17:55:38 发布

阅读量156

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/chencaw/article/details/113706981

版权

VUE 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

本文档展示了如何在Vue.js中创建并使用组件。首先创建了一个子组件`cpnC1`，然后创建了包含子组件的父组件`cpnC2`。在父组件的模板中，`cpnC1`作为子组件被嵌套使用。最后，将父组件`cpnC2`注册到根实例`chen1`中并在页面上进行挂载。整个过程详细解释了Vue.js中的组件定义、父子组件关系及组件的使用方法。

摘要由CSDN通过智能技术生成

1、创建子组件

        //1.创建第1个组件构造器对象（子组件）
        const cpnC1 = Vue.extend({
           //...
        });

2、创建父组件，并调用

        //2.创建第2个组件构造器对象（父组件）
        const cpnC2 = Vue.extend({
            //注意，使用了tab键上面的反斜杠``，因而可以换行定义
            template: `
                <div>
                    <h2>我是标题2</h2>
                    <p>这是内容，第2个组件1</p> 
                    <cpn1></cpn1>
                </div>`,
            // 父子组件
            components:{
                cpn1: cpnC1
            }
        });

3、注册父组件

 //root组件
        const chen1 = new Vue({
            el: '#app',  //用于挂载要管理的元素
            data:{//定义数据
                message:'你好啊，helloword',
                isShow: true
            },
            // // 以下是局部组件的用法
            // components:{
            //     my_cpn1: cpnC1,
            //     my_cpn2: cpnC2
            // }
            // 父子组件
            components:{
                cpn2: cpnC2
            }
        });

4、完整代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title-hellovuejs</title>
</head>
<body>
    <div id ="app">
        <!-- 3.使用组件 -->
        <cpn2></cpn2> 
    </div>
    <script src="../js/vue.js"></script>
    <script>
        //1.创建第1个组件构造器对象（子组件）
        const cpnC1 = Vue.extend({
            //注意，使用了tab键上面的反斜杠``，因而可以换行定义
            template: `
                <div>
                    <h2>我是标题1</h2>
                    <p>这是内容，第1个组件1</p>
                </div>`
        });
        //2.创建第2个组件构造器对象（父组件）
        const cpnC2 = Vue.extend({
            //注意，使用了tab键上面的反斜杠``，因而可以换行定义
            template: `
                <div>
                    <h2>我是标题2</h2>
                    <p>这是内容，第2个组件1</p> 
                    <cpn1></cpn1>
                </div>`,
            // 父子组件
            components:{
                cpn1: cpnC1
            }
        });
        // //2.注册组件
        // Vue.component('my-cpn',cpnC);

        //root组件
        const chen1 = new Vue({
            el: '#app',  //用于挂载要管理的元素
            data:{//定义数据
                message:'你好啊，helloword',
                isShow: true
            },
            // // 以下是局部组件的用法
            // components:{
            //     my_cpn1: cpnC1,
            //     my_cpn2: cpnC2
            // }
            // 父子组件
            components:{
                cpn2: cpnC2
            }
        });
    </script>
</body>

chencaw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
17vue学习_最简单的父子组件

1、创建子组件 //1.创建第1个组件构造器对象（子组件） const cpnC1 = Vue.extend({ //... });2、创建父组件，并调用 //2.创建第2个组件构造器对象（父组件） const cpnC2 = Vue.extend({ //注意，使用了tab键上面的反斜杠``，因而可以换行定义 template: `
复制链接

扫一扫

专栏目录