Vue组件和插槽

Vue组件

什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。

组件化和模块化的不同：

  模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一

  组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用

 

组件定义的四种方式

        // 方式1 使用 Vue.extend 配合 Vue.component 方法
        // let login= Vue.extend({
        //     template:'<h1>登录</h1>'
        // })
        // 方式二直接使用 Vue.component 方法：
        // Vue.component("login",{
        //     template:'<h2>登录</h2>'
        // })
        // 方式三 将模板字符串，定义到script标签中,需要添加id 和改变type类型为 x-template：
 
    <!-- <script id="login" type="x-template">
        <div>
            <h3>注册</h3>
        </div>
    </script> -->
 
        // Vue.component("login",{
        //     template:"#login"
        // })
 
 方式四 将模板字符串，定义到template标签中,只需要添加id
    <template id="mine">
        <div>
            <h1>个人中心</h1>
        </div>
    </template>
 
        Vue.component("login",{
            template:"#mine",
        })

 

组件中展示数据和响应事件

        // 组件中data需要被定义为方法然后通过返回值来拿到对象
        // 因为需要数据隔离
        // 组件可以多次调用，多次调用的组件，
        // 其中一个更改数据不会影响到别的组件，因为Vue中数据驱动试图

全局组件

Vue.component("app",{

template:"#app",

data(){

return{}

},methods:{

}

})

 

局部组件

    const vm = new Vue({
        el: '#app',
        data: {
            flag:true
        },
        methods: {
        },
        components:{
            mine:{
                template:"#mine",
                data(){
                    return{}
                },
                methods:{

                }
            }
        }
    })
 
组件的生命周期
和Vue实例一样有八个
beforeCreat()
created()
beforeMount()
mounted()
beforeUpdate()
update()
beforDestory()
destoryed()
 
组件传值
父传子
父组件直接穿就可以，子组件需要用props来接受
<body>
    <div id='app'>

        <father></father>
    </div>
    <template id="father">
        <div>
            父
            <son :props1="msg1" :props2="msg2"></son>
        </div>
    </template>
    <template id="son">
        <div>
            子{{props1}}{{props2}}
        </div>
    </template>
    <script>
        Vue.component("father",{
            template:"#father",
            data(){
                return{
                    msg1:123,
                    msg2:"haha"
                }
            },
           
        })
        Vue.component("son",{
            template:"#son",
            data(){
                return{}
            },
            props: {
                props1:[String,Number],
                props2:[String,Number]
            }
           
        })
    const vm = new Vue({
        el: '#app',
        data: {
        },
        methods: {
        }
    })
    </script>
 
子传父：
子组件调用父组件的方法
            1.  在父组件中给引用的子组件注册一个事件（这个事件的名字是自定义的）
            2.  子组件可以触发这个事件$emit('事件名字')
           
            子组件给父组件传递数据
            1.  $emit方法第二个参数可以定义子组件给父组件传递的内容
            2.  在父组件中怎么拿到这内容
            2.1 父组件这个方法没有自定参数，在父组件的方法直接加这个参数就可以拿到
            2.2 父组件有自定义参数，可以传入$event也可以拿到子组件传递的数据。通过$event只能传递第一个参数。
<body>
    <div id='app'>
            <father></father>
    </div>
<template id="father">
    <div>
        父组件 值：{{data}}
        <son @toson="fromson"></son>
    </div>
</template>
<template id="son">
    <div>
        子组件
        <button @click="toson">传值</button>
    </div>
</template>
    <script>
        Vue.component("father",{
            template:"#father",
            data(){
                return{
                    data:""
                }
            },
            methods:{
                fromson(msg){
                    this.data = msg
                    console.log(msg);
                }
            }

        })
        Vue.component("son",{
            template:"#son",
            data(){
                return{}
            },
            methods:{
                toson(){
                    this.$emit('toson', "子组件数据");
                }
            }
        })

    const vm = new Vue({
        el: '#app',
        data: {
        },
        methods: {
        }
    })
    </script>
 
 
插槽

插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。

<body>
    <div id='app'>
        <login>哈哈</login>
    </div>
    <template id="login">
        <div>
            <h2><slot></slot></h2>
            登录
        </div>
    </template>
    <script>
        Vue.component("login",{
            template:"#login",
            data(){
                return{}
            }
        })
    const vm = new Vue({
        el: '#app',
        data: {
        },
        methods: {
        }
    })
    </script>
</body>
 
具名插槽
<body>
    <div id='app'>
        <login>
            <template v-slot:footer>
                <div>底部</div>
            </template>
            <template v-slot:header>
                <div>头部</div>
            </template>
        </login>

    </div>

    <template id="login">
        <div>
            <h2><slot name="header"></slot></h2>
            登录
            <h1><slot name="footer"></slot></h1>
        </div>
    </template>
    <script>
        Vue.component("login",{
            template:"#login",
        })
    const vm = new Vue({
        el: '#app',
        data: {
        },
        methods: {
        }
    })
    </script>
</body>
posted @ 2022-01-09 20:51  ..Shmily  阅读(106)  评论(0)    收藏  举报