vue 组件通信

组件通信

1.父传子

• 在全局组件中自定义属性：<Child :myname="qname"></Child>
• 在组件中获取：{{myname}}

<div id="app">
    <h1>组件使用-父传子-自定义属性</h1>
    <Child :myname="qname"></Child>
</div>

<script>
    Vue.component('Child', {
        template: `
            <div>
                {{myname}}
            </div>
        `,
        props: ['myname']
    })
    var vm = new Vue({
        el: '#app',
        data: {
            qname: 'qc'
        }
    })
</script>

2.子传父

<div id="app">
    <h1>组件使用-子传父-自定义事件</h1>
    <Child @myevent="handleMyEvent"></Child>
    <hr>
    {{text}}
</div>

<script>
    Vue.component('Child', {
        template: `
            <div>
                <button @click="handleChange">发送</button>
                 <input type="text" v-model="mytext">
            </div>
        `,
        data() {
            return {mytext: ''}
        },
        methods: {
            handleChange() {
                this.$emit('myevent',this.mytext)
            }
        }
    })

    var vm = new Vue({
        el: '#app',
        data: {
            'text': ''
        },
        methods:{
            handleMyEvent(item){
                this.text=item
            }
        }

    })
</script>