美文网首页
vue 组件间的传值 子传父

vue 组件间的传值 子传父

作者: 闫梓璇 | 来源:发表于2018-09-22 10:03 被阅读0次

效果图:

未点击: QQ截图20180922094416.png
点击后: QQ截图20180922094509.png

body:

 <div id="app">
   <my-father></my-father>
</div>

js:

<script>
   //父组件
    Vue.component('my-father',{
        template:
        `
            <div>
                <h1>{{mess}}</h1>
                <my-child v-on:send='Msg'></my-child>
            </div>
        `,
        data:function(){
            return{
                mess:''
            }
        },
        methods:{
            //父组件接收子组件传过来的值  值为txt
            Msg:function(txt){
                this.mess=txt
            }
        }
    })
    //子组件
    Vue.component('my-child',{
        template:
        `
            <button @click='sendToFather'>传值给父元素</button>
        `,
        data:function(){
            return{
                message:'我是子组件,给父组件传值'
            }
        },
        methods:{
            sendToFather:function(){
                //         自定义事件,传输的数据
                this.$emit('send',this.message)
            }
        }
    })
    
    new Vue({
        el:'#app'
    })
</script>

相关文章

  • Vue - 传值

    Vue 传值有两种:1)父组件向子组件传值(属性传值,Prop传值)2)子组件向父组件传值 一、父组件向子组件传值...

  • 2019-03-13

    vue父子组件传值,(父组件向子组件传值用prop ,子组件向父组件传值:子组件调用父组件方法值以参数的方式传递)...

  • 2019-03-13

    vue父子组件传值,(父组件向子组件传值用prop ,子组件向父组件传值:子组件调用父组件方法值以参数的方式传递)...

  • vue2.0的三种常用传值方式,并且如何实现?

    vue2.0 组件传值方式有三种:父组件向子组件传值,子组件向父组件传值,非父子组件传值 : 父传子: 首先现在父...

  • 前端基础搬运工-VUE模块

    十、VUE模块 基础部分 1. Vue组件间传值 答: -[ ] 1.父子之间的传值 父组件向子组件传值通过p...

  • 04vue2.0-Vue组件化-组件间的数据传递

    Vue组件之间传值 父组件向子组件传值 1.父组件向子组件传值 父组件发送的形式是以属性的形式绑定值到子组件身上。...

  • vue组件间传值问题总结

    vue项目中,组件间传值的问题总结: 父传子 父组件 子组件 上面父组件和子组件之间的传值是模拟接口请求数据,然后...

  • vue 组件之间传值 父传子 子传父 todolist

    vue 组件之间传值 父传子 子传父 todolist

  • Vue组件传值

    vue组件传值 一、父组件向子组件传值方式: 1. 子组件中定义props,父组件向子组件props进行传值。 2...

  • vue中父子组件传值

    vue中父子组件传值是经常使用的场景 父组件向子组件中传值 父组件 子组件 父组件向子组件中传值分三步1、在父组件...

网友评论

      本文标题:vue 组件间的传值 子传父

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