Vue组件间相互传递信息

最新推荐文章于 2024-03-02 15:41:26 发布

蜗牛杨哥

最新推荐文章于 2024-03-02 15:41:26 发布

阅读量788

点赞数

本文链接：https://blog.csdn.net/u014635374/article/details/118938936

版权

代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过props属性父组件向子组件传递内容</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <p>子组件接收父组件传递的数据(通过props属性传递):</p>
    <my-parent name="这是父组件要传递的内容"></my-parent>
    <p>
        $emit传值：$emit能够将子组件中的值传递到父组件中去。$emit可以触发父组件中定义的事件，子组件的数据信息通过传递参数的方式完成
    </p>
    <p>父组件定义事件处理函数transContent，并接收payload参数</p>
    <p>触发父组件中绑定的childfn事件，并传递子组件中的message数据</p>
    <parent></parent>
</div>
<!-- 定义的模板文件-->
<template id="child">
    <div>
        <button @click="click">Send</button>
        <input type="text" v-model="message">
    </div>
</template>

<hr/>
<div>
    <div v-if="isShow" ref="data_do">test</div>
    <button @click="isShow=!isShow">更新</button>
</div>


</body>
<script>
    let subVm = Vue.component('my-parent', {
        props: ['name'],
        template: '<p>从父组件获得的信息为 ：{{name}}</p>'
    });

    // 定义组件parent
    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() {
                this.$emit('childFn', this.message);
            }
        }
    });

    let vm = new Vue({
        el: '#app',
        data: {
            isShow: false
        },
        methods: {
            beforeCreate() {
                console.log('实例创建之前')
                console.log(this.$data.msg)
            },
            created() {
                console.log('实例创建之后')
                console.log(this.$data.msg)
            },
            beforeMount() {
                console.log('挂载之前')
                // 通过this.$el获取el的DOM元素
                console.log(this.$el.innerHTML)
            },
            mounted() {
                console.log('挂载之后')
                console.log(this.$el.innerHTML)
            },
            beforeUpdate() {
                console.log('更新之前')
                console.log(this.$refs.data_do)
            },
            updated() {
                console.log('更新之后')
                console.log(this.$refs.data_do)
            },
            beforeDestroy () {
                console.log('销毁之前')
                console.log(this.$refs.data_do)
                console.log(this.msg)
                console.log(vm)
            },
            destroyed () {
                console.log('销毁之后')
                console.log(this.$refs.data_do)
                console.log(this.msg)
                console.log(vm)
            }




        }
    })


</script>
<style scopted>
    body {
        font-size: 14px;
        background-color: #efefef;
        font-family: "宋体"
    }

    #app {
        margin: 0px;
        border: 0px;
        padding: 0px;
        text-align: center;
    }
</style>
</html>

效果：