04路由 vue父子组件之间传递消息

最新推荐文章于 2022-03-26 08:51:58 发布

asdfwxy

最新推荐文章于 2022-03-26 08:51:58 发布

阅读量183

点赞数

分类专栏： vue 文章标签： vue父子组件传值

本文链接：https://blog.csdn.net/asdfwxy/article/details/102629116

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

父组件给子组件传递信息：
1：定义一个子组件，通过components放到父组件内部。
2：父组件中的信息，在子组件中绑定一下。
3：props：定义传递的信息

子组件给父组件传值
1：子组件的数据，
2：父组件中定义一个方法，获取子组件的信息。并且设置此值开始是空，
3：在子组件中写一个按钮绑定子组件传递的方法。
4：子组件中的￥emit方法。

<body>
    <div id="app">
        <!-- #1 绑定，通过v-bind绑定parentmsg为'msg' -->
        <son v-bind:parentmsg="msg" @func='getMessageFromSon'></son>
        <!-- ##44 绑定方法 -->
    </div>

    <template id="son">
        <div>
            <h1>我是子组件,我可以获取到父组件的值--{{parentmsg}}</h1>
            <input type="button" value="传递信息" @click="sendmsg">
        </div>
    </template>

    <script>
        // 1 创建一个子组件
        var son = {
            template:'#son',
            data() {
                return {
                    msg:'给父组件传递信息'// ##11 子组件有一个信息，要传递给父组件
                }
            },
            props:['parentmsg'],//#2 通过props:[‘绑定的数据’],这里相当于一个规则.
            methods:{
                sendmsg(){
                    this.$emit('func',this.msg);//##5 调用了fun,传递了自己的msg.
                }
            }
        }
        // 2 子组件通过components,传到父组件里
        var vm = new Vue({
            el:"#app",
            data:{
                msg:"我是父组件",
                msgFromSon:'' //##33 默认子组件的信息是空

            },
            methods:{
                getMessageFromSon(data){
                    this.msgFromSon = data
                    console.log(this.msgFromSon)//##22 获取到子组件的信息
                }
            },
            components:{
                son
            }
        })
    </script>