组件之间使用Prop传递数据

Posted 2020-08-30 zhishaofei3

<div id="example">
    <father></father>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">

    Vue.component(‘child‘, {
        props: [‘myMessage‘],
        template: ‘<div>{{myMessage}}<input v-model="counterMessage"></div>‘,
        computed: {
            counterMessage: function () {
                return this.myMessage.trim().toLowerCase()
            }
        }
    })

    Vue.component(‘father‘, {
        template: ‘            <div>                <div>{{parentMsg}}</div><br><child :my-message="parentMsg"></child>            </div>‘,
        data: function () {
            return {
                parentMsg: ‘ a22 asdasdasd sdasdAS asdAS ‘
            }
        }
    });

    new Vue({
        el: ‘#example‘
    })

</script>