zoukankan      html  css  js  c++  java
  • vue通信之子父组件通信

    子父组件通信:

    创建一个父组件 Home , 创建一个子组件 Head

    Home 组件:

    import Head from "./Head.vue"  // 引入 Head 组件
    
    components:{
       "v-head":Head     // 注册 head 组件
    }

    Head 组件:

    <button @click="toPar()">传递给父组件</button>  // 点击事件触发
    
    data(){
    return{
    msg:"传递给父组件的信息"
    }
    },
    methods:{ toPar(){ this.$emit("toParent",{msg:this.msg}) // $emit 触发传递自定义的事件,{} 对象里可以传递数据  } }

    Home 组件:

    <v-head @toParent="getData"></v-head>   // @toParent 通过触发的事件,调用 父组件中定义的事件
     methods:{
        getData(data){
           console.log(data);   // 打印传递过来的数据
        }
     }

    控制台打印数据:

    {msg: "传递给父组件的信息"}

    子组件 通过 $emit 触发传递自定义事件,及数据,在父组件中子组件标签上 @自定义事件,调用父组件定义事件,这样,就实现了子父组件之间的通信

  • 相关阅读:
    mac 程序 Access-JSON-Data
    第一个 mac 程序 Create-JSON-Model
    CATransform3D的m34使用
    超级好用的解析JSON数据的网站
    iOS设计模式
    iOS设计模式
    iOS设计模式
    iOS设计模式
    iOS设计模式
    iOS设计模式
  • 原文地址:https://www.cnblogs.com/Sky-Ice/p/9289922.html
Copyright © 2011-2022 走看看