Vue组件之间$emit传值(子传父)和组件切换

最新推荐文章于 2024-02-27 02:18:48 发布

y17757773039

最新推荐文章于 2024-02-27 02:18:48 发布

阅读量898

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/y17757773039/article/details/127350012

版权

1、$emit传值
功能：能够将子组件中的值传递到父组件中去。
参数: emit（event自定义事件，arg数组）

    <div id="app">
        <parent></parent>
    </div>

    <template id="child">
        <div>
            <!-- @符号约等于v-on:监听事件 -->
            <button @click="click">Send</button>
            <input type="text" v-model="message">
        </div>
    </template>

    <script>
        Vue.component('parent',{
            template: '<div><child @childFn="transContent"></child>'+
                '子组件传来的值：{{message}}</div>',
                data(){
                    return{
                        message:''
                    }
                },
                methods:{
                    transContent(payload){
                        this.message=payload
                    }
                }
        })

        //child组件
        Vue.component('child',{
            template:'#child',
            data(){
                return{
                    message:'子组件的消息'
                }
            },
            methods:{
                click(){
                    //$emit传递参数(event自定义事件,arg)
                    this.$emit('childFn', this.message);
                }
            }
        })
        var vm=new Vue({el:'#app'})
    </script>

2、组件切换
应用场景：单页应用开发
思路:通过v-if判断flag的值true和false，显示相应的组件，点击按钮改变flag值。

    <div id="app">
        <a href="#" @click.prevent="flag ? flag=flag : flag=!flag">登录</a>
        <a href="#" @click.prevent="flag ? flag=!flag : flag=flag">注册</a>
        <login v-if="flag"></login>
        <register v-else="flag"></register>
    </div>
    <script>
        Vue.component('login',{
            template:'<div>登录页面</div>'
        })
        Vue.component('register',{
            template:'<div>注册页面</div>'
        })
        var vm=new Vue({
            el :'#app',
            data:{
                flag:true
            }
        })
    </script>

3、组件切换
除了v-if实现，还能使用is属性来实现。
思路：is属性绑定data中的comName,通过a标签改变comName值，从而切换对应组件。被is属性绑定的值才是真正的组件名。

    <div id="app">
        <a href="#" @click.prevent="comName='login'">登录</a>
        <a href="#" @click.prevent="comName='register'">注册</a>
        <component v-bind:is="comName"></component>
    </div>
    <script>
        Vue.component('login',{
            template: '<div>登录页面</div>'
        })
        Vue.component('register',{
            template: '<div>注册页面</div>'
        })
        var vm=new Vue({
            el:'#app',
            data:{comName:''}
        })
    </script>