vue.js中子组件向父组件传递数据

作者: 痛心凉 | 来源:发表于2017-10-11 21:12 被阅读18次
子组件通过$emit方法向父组件发送数据,子组件在父组件的模版中,通过自定义事件接收到数据,并通过自定义函数操作数据

<div id="layout">
<h1>你好{{msg}}</h1>

<tm2 @fn="get"></tm2>
</div>
<template id="tm1">
<div>
<p>11111</p>
<slot name="aa"></slot>
</div>
</template>
<template id="tm2">
<div @click="send">
22222
</div>
</template>

<script type="text/javascript">
    let tm2={
        template:"#tm2",
        data:function(){
            return{
                msg:"hello"
            
            }
        },
        methods:{
            send(){
                //触发的事件名    fn触发的事件        向父组件传递的数据  
                this.$emit("fn",this.msg)
            }
        }
    }
    new Vue({
        el:"#layout",
        components:{tm2},
        data:{
            msg:""
        },
        methods:{
            get(x){
                this.msg=x
            }
        }
        
    })
</script>

相关文章

  • vue.js中子组件向父组件传递数据

    子组件通过$emit方法向父组件发送数据,子组件在父组件的模版中,通过自定义事件接收到数据,并通过自定义函数操作数...

  • 弹窗设置(父子传参原理)

    父组件: 1.父组件向子组件传递数据父组件绑定属性,给子组件传递数据子组件通过props接收父组件传递过来的数据子...

  • Vue中组件间传值总结 ------ 2020-05-17

    父子组件间传递数据的方式 1、父组件向子组件传递数据 2、子组件向父组件传递数据 3、父子组件相互传递同一数据的两...

  • Vue 组件之间传值

    1. 父组件使用props向子组件传递数据 2. 子组件使用$emit向父组件传递数据

  • uniapp 父子组件传值

    一、父组件向子组件传递数据(props) child parent 二、子组件向父组件传递数据(emit) par...

  • vue父子组件传递数据方法

    标签(空格分隔): vue 父组件向子组件传递数据 Vue中父组件向子组件传递数据用props 举个例子 父组件中...

  • 前端mvvm框架vue.js(3)——父子组件通信

    vue.js父子组件通信:1,父组件向子组件传递数据,通过props,注意数据绑定是单向的(借鉴了react);2...

  • 父子传参

    父组件 父组件向子组件传递数据 1.父组件绑定属性,给子组件传递数据2.子组件通过props接收父组件传递过来的数...

  • React组件间传递数据方法

    父组件向子组件传递 props 子组件向父组件传递 传递带参的方法redux 跨组件传递,解决数据比较深,传递了多...

  • vue子父组件通信

    子父组件传递数据 父组件===》子组件。父组件通过props向子组件中传递数据和改变数据的函数,通过在子组件中调用...

网友评论

    本文标题:vue.js中子组件向父组件传递数据

    本文链接:https://www.haomeiwen.com/subject/qnjbyxtx.html