zoukankan      html  css  js  c++  java
  • vue子组件给父组件传值

    子组件:
     
    <template>
        <div class="app">
           <input @click="sendMsg" type="button" value="给父组件传递值">
        </div>
    </template>
    <script>
    export default {
     
        data () {
            return {
                //将msg传递给父组件
                msg: "我是子组件的msg",
            }
        },
         methods:{
             sendMsg(){
                 //func: 是父组件指定的传数据绑定的函数,this.msg:子组件给父组件传递的数据
                 this.$emit('func',this.msg)
             }
         }
    }
    </script>
     

    子组件通过this.$emit()的方式将值传递给父组件

    注意:这里的func是父组件中绑定的函数名

    父组件:


    <template>
    <div class="app">
    <child @func="getMsgFormSon"></child>
    </div>
    </template>
    <script>
    import child from './child.vue'
    export default {
    data () {
    return {
    msgFormSon: "this is msg"
    }
    },
    components:{
    child,
    },
    methods:{
    getMsgFormSon(data){
    this.msgFormSon = data
    console.log(this.msgFormSon)
    }
    }
    }
    </script>

  • 相关阅读:
    让本地仓库和远程仓库关联
    指定本地仓库与github上的test项目相连
    Git 指令
    DOS命令+++GITHUP用法
    xml
    渲染数据的方法
    php
    css3的过渡、动画、2D、3D效果
    渲染数据
    ajax
  • 原文地址:https://www.cnblogs.com/tzwbk/p/12654770.html
Copyright © 2011-2022 走看看