Vue中的组件基础知识

最新推荐文章于 2024-07-13 15:14:03 发布

WaNgLu：）

最新推荐文章于 2024-07-13 15:14:03 发布

阅读量262

点赞数

分类专栏：前端文章标签： Vue中的组件定义组件组件间的传值

本文链接：https://blog.csdn.net/qq_44313091/article/details/104030697

版权

前端专栏收录该内容

42 篇文章 2 订阅

订阅专栏

创建组件的方式

 // 1.1使用Vue.extend 来创建全局的Vue组件
        var com1 = Vue.extend({
            // 通过template属性，指定了组件要展示的HTML结构
            template:'<h3>这是使用Vue.extend 创建的组件</h3>'
        })

        // 1.2使用Vue.component('组件的名称',创建出来的组件模板对象)
        Vue.component('myCom1',com1)

使用Vue.extend({})来创建Vue的全局模板对象，其中template指定了组件要展示的HTML结构，然后使用使用Vue.component来定义一个组件。

以下是简写方式

 Vue.component('myCom1',{
            // 注意：无论是哪种方式创建出来的组件，组建的template属性指向得到模板内容，
            // 必须有且只能有唯一的一个根元素
            template:'<div><h3>这是使用Vue.component 直接创建的组件</h3><span>123</span></div>'
        })

注意：无论是哪种方式创建出来的组件，组件的template属性指向的模板内容，必须有且只能有唯一的一个根元素

创建私有的组件

 let vm2 =new Vue({
            el:'#app2',
            data:{},
            methods:{},
            components:{
                login:{
                    template:"<h1>这是私有的login组件</h1>"
                }
            },  //定义实例内部私有组件的

        })

通过components属性定义私有的组件。通过以上方式即可在HTML结构中使用<login></login>标签。

组件的data数据

1.组件中可以有自己的data数据。

2.组件中的data数据和实例中的data数据不一样，实例中的data数据可以为一个对象，但是组件中的data必须是一个方法。

3.组件中的data除了必须是一个方法之外，这个方式内部还必须返回一个对象

Vue.component('myCom',{
            template:'<h1>这是全局组件-----{{msg}}</h1>',
            data:function(){
                return {
                    msg:'111'
                }
            }
        })

组件切换的方式

<body>
    <div id="app">
        <a href="" @click.prevent ='flag =true'>登录</a>
        <a href="" @click.prevent ='flag =false'>注册</a>
        <login v-if='flag'></login>
        <register v-else='flag '></register>
    </div>
    <script>
        Vue.component('login',{
            template:'<h1>登录组件</h1>'
        })

        Vue.component('register',{
            template:'<h1>注册组件</h1>'
        })
        let vm =new Vue({
            el:'#app',
            data:{
                flag:true
            },
            methods:{}
        })
    
    </script>
</body>

可以通过以上方式来切换组件，定义一个flag变量，通过v-show来不断的切换组件，但是这种方式有一种弊端，只能在两种组件中选择切换，所以建议使用以下方式。

<body>
    <div id="app">
        <a href="" @click.prevent ='isCom="login"'>登录</a>
        <a href="" @click.prevent ='isCom="register"'>注册</a>

        <!-- Vue提供了component，来展示对应名称的组件 -->
        <!-- component是一个占位符，:is属性，可以用来指定要展示的组件的名称 -->
        <component :is="isCom"></component>
   
    </div>
    <script>
        Vue.component('login',{
            template:'<h1>登录组件</h1>'
        })

        Vue.component('register',{
            template:'<h1>注册组件</h1>'
        })

        let vm =new Vue({
            el:'#app',
            data:{
                isCom:'login'
            },
            methods:{}
        })
    
    </script>
</body>

Vue提供了component来展示对应名称的组件，component是一个占位符，：is属性，可以用来指定要展示的组件的名称，这样就可以再多种组件之间完成切换。

组件之间传值的问题

父组件向子组件传递一个data数据

<body>
    
    <div id="app">
        <!-- 
            父组件可以再引用子组件的时候，通过属性绑定（v-bind）的形式，把需要传递
            给子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用
         -->
        <com1 :parentmsg="msg"></com1>
    </div>
    <script>
        let vm =new Vue({
            el:'#app',
            data:{
                msg:'123'
            },
            methods:{},
            components:{
      
                com1:{
                    // 子组件中的data数据，并不是通过父组件传递过来的，而是子组件自身私有的
                    data(){     //data中的数据都是可读可写的
                        return {
                            title:'213',
                            content:'qq'
                        }
                    },
                    template:'<h1>这是子组件---------{{parentmsg}}</h1>',
                    // 注意：组件中的所有props中的数据，都是通过父组件传递给子组件的
                    // props中的数据都是只读的，无法重新赋值
                props:[     //把父组件传递来的parentmsg属性，先在props数组中定义一下，这样，才能使用这个数据
                    'parentmsg'
                ]
                },
            }
        })
    </script>
</body>

父组件可以再引用子组件的时候，通过属性绑定（v-bind简写：）的形式，把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用。在子组件中，把父组件传递来的值，在props数组中定义一下，才能使用。

注意：props中的数据只能读不能写，不能在子组件中修改props中父组件传递来的值

父组件向子组件传递一个方法

<body>
    
    <div id="app">
        <!-- 
            父组件向子组件传递方法，使用的是事件绑定机制；v-on 简写@
            当我们自定义一个事件属性之后，那么，子组件就能够，通过某些方式，来调用传递进去的这个方法了
         -->
        <com2 @func="show"></com2>
    </div>

    <template id="tmpl">
        <div>
            <h1>这是子组件</h1>
            <input type="button" value="这是子组件的按钮" @click='myclick'>
        </div>
    </template>

    <script>
        // 定义了一个字面量类型的组件模板对象
        var com2 ={
            template:'#tmpl',
            data(){
                return{
                   
                }
            },
            methods:{
                    myclick(){
                       
                        this.$emit('func',123)
                    }
                }
        }

        let vm =new Vue({
            el:'#app',
            data:{
            },
            methods:{
                show(data){
                   console.log("调用了父组件的方法"+ data)
                }
            },
            components:{
                com2,
            }
        })
    </script>
</body>

当父组件向子组件传递方法时，使用的事件绑定机制，（v-on简写@），当我们自定义一个事件属性之后，那么，子组件就能够通过某些方式使用这个方法了。在子组件中可以通过this.$emit（），来调用父组件传递来的方法，并且当方法中需要传入参数时，可以在第二个参数中，传入相应的参数。

可以利用this.$emit（）方法实现子组件向父组件传值，例如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    
    <div id="app">
        <com2 @func="show"></com2>
    </div>

    <template id="tmpl">
        <div>
            <h1>这是子组件</h1>
            <input type="button" value="这是子组件的按钮" @click='myclick'>
        </div>
    </template>

    <script>
        // 定义了一个字面量类型的组件模板对象
        var com2 ={
            template:'#tmpl',
            data(){
                return{
                    sonmsg:{name:'kobe',age:32}
                }
            },
            methods:{
                    myclick()
                        this.$emit('func',this.sonmsg)
                    }
                }
        }
        let vm =new Vue({
            el:'#app',
            data:{
                predata:null
            },
            methods:{
                show(data){        
                    this.predata =data
                }
            },
            components:{
                com2,
           }
        })
    </script>
</body>
</html>