Vue中组件之间的通信

最新推荐文章于 2024-08-09 18:48:50 发布

前端小菜鸡儿

最新推荐文章于 2024-08-09 18:48:50 发布

阅读量77

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_44361433/article/details/89220895

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

父组件与子组件之间的参数传递
（1）父传子

<body>
<div id="app">
    <parent></parent>
</div>
<script src="../js/vue.min.js"></script>
<script>
    Vue.component("parent",{
        data:function () {
            return{ tips:'张无忌'}
        },
        template:`
            <div>
                <h4>父组件</h4>
                <form action="#"><child :myValue="tips"></child></form>
            </div>
        `
    });
    Vue.component("child",{
        template:`<input type="text" v-bind:placeholder="myValue">`,
        props:["myValue"],
        mounted:function () {
            console.log(this.myValue);
        }
    });
    new Vue({
        el:"#app"
    })
</script>
</body>

（2）子传父

<body>
<div id="app">
    <parent></parent>
</div>
<script src="../js/vue.min.js"></script>
<script>
    Vue.component("parent",{
        methods:{
            getData:function(msg){ //通过事件传递接受子组件的数据
                 console.log(msg);
            }
        },
        template:`
        <div>
            <h1></h1>
            <child @dataEvent="getData"></child>
        </div>
        `
    })
    Vue.component("child",{
        methods:{
            setData:function () {
                this.$emit("dataEvent","该交学费了");//触发绑定自定义事件dataEvent并且传递数据
            }
        },
        template: `
            <input type="button" @click="setData" value="传递数据">
        `
    })
    new Vue({
        el:"#app"
    })
</script>
</body>

（3）互相传值

<script>
    Vue.component("parent",{
        data:function(){
            return{name:"张三丰"}
        },
        methods:{
            getData:function(){ 
                 layer.msg("子组件的名字:"+this.$refs.mySon.name)
            }
        },
        template:`
        <div>
            <input type="button" @click="getData" value="获取子组件的数据">
            <child ref="mySon"></child>
        </div>
        `
    })
    Vue.component("child",{
        data:function(){
            return{name:"张无忌"}
        },
        methods:{
            setData:function () {
                layer.msg(this.$parent.name,{ offset:'t',anim:6})
            }
        },
        template: `
            <input type="button" @click="setData" value="传递数据">
        `
    })
    new Vue({
        el:"#app"
    })
</script>