Vue笔记15_组件

最新推荐文章于 2024-11-09 21:44:05 发布

qqq777_

最新推荐文章于 2024-11-09 21:44:05 发布

阅读量89

点赞数

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

本文链接：https://blog.csdn.net/qqq777_/article/details/115461732

版权

vue 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js中的组件基本使用，包括全局组件、局部组件的创建和注册，以及父组件和子组件的概念和通信方式。通过实例展示了如何通过Vue.extend创建组件构造器，使用props进行父传子通信，以及通过$emit实现子传父的事件传递。此外，还强调了组件的data属性必须为函数以确保每个组件实例的数据独立。

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

基本使用过程：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div id="app">
        <my-cpn></my-cpn>
        <my-cpn></my-cpn>
    </div>
    <script src="vue.js"></script>
    <script>
        //1.创建组件构造器对象
        const cpnC=Vue.extend({
            template:`
            <div>
                <h2>i am title</h2>
                <p>i am inner word</p>
                <p>i am inner word2</p>
            </div>`
        })
        //2.注册组件
        Vue.component('my-cpn',cpnC)
        var app=new Vue({
            el:"#app",
            data:{
                
             },
            computed:{
                
            },
            methods:{
                
            },
            filters:{
                
            } 
        })
        //axios.get('https://autumnfish.cn/api/joke/list?num=3')
            
    </script>
</body>
</html>

全局组件和局部组件
全局组件：调用Vue.componet()注册，可以在多个vue实例下使用。上面例子是全局组件。
局部组件：在某个vue实例中注册。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div id="app">
        <mycpn></mycpn>
        <mycpn></mycpn>
    </div>
    <script src="vue.js"></script>
    <script>
        //1.创建组件构造器对象
        const cpnC=Vue.extend({
            template:`
            <div>
                <h2>i am title</h2>
                <p>i am inner word</p>
                <p>i am inner word2</p>
            </div>`
        })
        var app=new Vue({
            el:"#app",
            data:{
                
             },
             //2.注册局部组件
             components:{
                 mycpn:cpnC
             }           
        })
        //axios.get('https://autumnfish.cn/api/joke/list?num=3')
            
    </script>
</body>
</html>

父组件和子组件
先创建两个组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div id="app">
        <mycpn1></mycpn1>
        <mycpn2></mycpn2>
    </div>
    <script src="vue.js"></script>
    <script>
        //1.创建第一个组件构造器对象
        const cpnC1=Vue.extend({
            template:`
            <div>
                <h2>i am title</h2>
            </div>`
        })
        const cpnC2=Vue.extend({
            template:`
            <div>
                <h2>i am title2</h2>
            </div>`
        })
        var app=new Vue({
            el:"#app",
            data:{
                
             },
             //2.注册局部组件
             components:{
                 mycpn1:cpnC1,
                 mycpn2:cpnC2
             }           
        })
        //axios.get('https://autumnfish.cn/api/joke/list?num=3')
            
    </script>
</body>
</html>

cpn2为父组件，cpn1为子组件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div id="app">
        <mycpn2></mycpn2>
        <mycpn1></mycpn1><!--不显示-->
    </div>
    <script src="vue.js"></script>
    <script>
        //1.创建第一个组件构造器对象
        const cpnC1=Vue.extend({
            template:`
            <div>
                <h2>i am title</h2>
            </div>`
        })
        const cpnC2=Vue.extend({
            template:`
            <div>
                <h2>i am title2</h2>
                <mycpn1></mycpn1>
            </div>`,
            components:{
                mycpn1:cpnC1
            }
        })
        var app=new Vue({
            el:"#app",
            data:{
                
             },
             //2.注册局部组件
             components:{
                mycpn2:cpnC2,
                //mycpn1:cpnC1
             }           
        })
        //axios.get('https://autumnfish.cn/api/joke/list?num=3')
            
    </script>
</body>
</html>

在vue实例中注册cpn1，上面代码不显示地方会显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div id="app">
        <mycpn2></mycpn2>
        <mycpn1></mycpn1><!--显示-->
    </div>
    <script src="vue.js"></script>
    <script>
        //1.创建第一个组件构造器对象
        const cpnC1=Vue.extend({
            template:`
            <div>
                <h2>i am title</h2>
            </div>`
        })
        const cpnC2=Vue.extend({
            template:`
            <div>
                <h2>i am title2</h2>
                <mycpn1></mycpn1>
            </div>`,
            components:{
                mycpn1:cpnC1
            }
        })
        var app=new Vue({
            el:"#app",
            data:{
                
             },
             //2.注册局部组件
             components:{
                mycpn2:cpnC2,
                mycpn1:cpnC1
             }           
        })
        //axios.get('https://autumnfish.cn/api/joke/list?num=3')
            
    </script>
</body>
</html>

组件的data必须为函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div id="app">
        <cpn></cpn>
    </div>
<template id="cpn2">
    <div>
        <h2>i am title</h2>
        <h2>{{message}}</h2>
    </div>
</template>
    <script src="vue.js"></script>
    <script>
        //1.语法糖创建组件构造器对象
        Vue.component("cpn",{
            template:'#cpn2',
            data(){
                return {
                    message:'abc'
                }
                
            }
        })
        var app=new Vue({
            el:"#app",
            data:{
                
             },           
        })
        //axios.get('https://autumnfish.cn/api/joke/list?num=3')
            
    </script>
</body>
</html>

父子组件通信
父传子：props

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
<div id="app">
    <cpn :cinfo='info'></cpn>
</div>
<template id="cpn">
    <div>
        <h2>i am title</h2>
        {{cinfo.name}}
    </div>
</template>
<script src="vue.js"></script>
<script>
        //父传子：props
        const cpn={
            template:'#cpn',
            props:{
                cinfo:{
                    type:Object,
                    default(){
                        return {}
                    }
                }
            }
        }
        const app=new Vue({
            el:"#app",
            data:{
                info:{
                    name:'aaa',
                    age:13
                }
             },
             components:{
                 cpn
             }           
        })
        //axios.get('https://autumnfish.cn/api/joke/list?num=3')
            
</script>
</body>
</html>

子传父：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
 <!--父组件 -->   
<div id="app">
    <!--父组件绑定事件，监听-->
    <cpn @itemclick='cpnclick'></cpn>
</div>

<!-- 模板 -->
<template id="cpn">
    <div>
        <button v-for='item in categories' @click='btnclick(item)'>{{item.name}}</button>
    </div>
</template>

<script src="vue.js"></script>
<script>
    //1.子组件
    const cpn={
            template:'#cpn',
            data(){
                return {
                    categories:[
                        {id:'aaa',name:'111'},
                        {id:'bbb',name:'222'},
                        {id:'ccc',name:'333'}
                    ]
                }
            },
            methods:{
                btnclick(item){
                    //子组件发射事件
                    this.$emit('itemclick',item)
                }
            }
        }
    const app=new Vue({
            el:"#app",
            data:{
                info:{
                    name:'aaa',
                    age:13
                }
            },
            components:{
                cpn
            },
            methods:{
                cpnclick(item){
                    console.log('cpnclick');
                }
            }           
        })
        //axios.get('https://autumnfish.cn/api/joke/list?num=3')            
</script>
</body>
</html>