子传父值

作者: 王wl | 来源:发表于2018-09-21 14:43 被阅读0次

Vue_组件间传值
vue不同组件间传值方式
vue 中传值（父传子、子传父（传递多个事件）、eventBus
vue2.0 父子组件传值
Vue - 传值
react父子组件传值
Vue.js父子组件传值
vue 组件之间传值方法
Vue.js父子组件和非父子组件间的传值通信
2018-09-05

效果1如下：

QQ图片20180921144246.png

代码1如下：

<body>
<div id='app'>
    <my-father></my-father>
</div>
<script src="js/vue.js"></script>
<script>
    Vue.component("my-father",{
        template:`
            <div>
                <h1>我是父组件</h1>
                <p>子组件传过来的数据:<b>{{mess}}</b></p>
                <my-child @send='rcvMsg'></my-child>
            </div>
            `,
        data:function(){
            return{
                mess:''
            }
        },
        methods:{
            rcvMsg:function(txt){
                this.mess=txt
            }
        }
    })
    Vue.component('my-child',{
        template:`
            <div>
                <h1>我是子组件</h1>
                <input type='text' v-model='msg'><button @click='sendMsg'>发送</button>
            </div>
            `,
        data:function(){
            return{
                msg:''
            }
        },
        methods:{
            sendMsg:function(){
                this.$emit('send',this.msg)
            }
        }
    })
    new Vue({
        el:'#app'
    })
</script>

效果2如下：

QQ图片20180921144455.png

代码2如下：

<body>
<div id="app">
    <my-father></my-father>
</div>
<script src="js/vue.js"></script>
<script>
    Vue.component("my-father",{
        template:`
            <div>
                <h1>{{mess}}</h1>
                <my-child @send='rcvMsg'></my-child>
            </div>
        `,
        data:function(){
            return{
                mess:''
            }
        },
        methods:{
            rcvMsg:function(txt){
                this.mess=txt
            }
        }
    })
    Vue.component('my-child',{
        template:`
            <button @click='sendToFather'>传给父元素</button>
        `,
        data:function(){
            return{
                msg:'我是子组件中的数据，要给父组件传值'
            }
        },
        methods:{
            sendToFather:function(){
                this.$emit('send',this.msg)
            }
        }
    })
    new Vue({
        el:'#app'
    })
</script>

效果3如下：

QQ图片20180921144837.png

代码3如下：

  <div id='app'>
   <my-component></my-component>
  </div>
<script src="js/vue.js"></script>
<script>
    Vue.component('my-component',{
        template:`
            <div>
                <h1>我是父组件</h1>
                <my-child v-bind:megg='msg' @send='rcvMsg'></my-child>
                <b>{{number}}</b>
            </div>
        `,
        data:function(){
            return{
                msg:'hello vue',
                number:''
            }
        },
        methods:{
            rcvMsg:function(txt){
                this.number=txt
            }
        }
    })
    Vue.component('my-child',{
        props:['magg'],
        template:`
            <div>
                <h2>我是子元素</h2>
                <a hred='#'>{{magg}}</a>
                <button @click='sendFather'>发送给父组件</button>
            </div>
        `,
        data:function(){
            return{
                num:5
            }
        },
        methods:{
            sendFather:function(){
                this.$emit('send',this.num)
            }
        }
    })
    new Vue({
        el:'#app'
    })
</script>