Props在vue组件中各种角色总结

在Vue中组件是实现模块化开发的主要内容，而组件的通信更是vue数据驱动的灵魂，现就四种主要情况总结如下：

使用props传递数据---组件内部

//html<div id="app1">
    <i>注意命名规定：仅在html内使用my-message</i>
    <child my-message="组件内部数据传递"></child></div>//js<script>
    Vue.component('child', {
        props: ['myMessage'],
        template: '<mark>{{ myMessage }}<mark/>'
    });    new Vue({
        el: '#app1'
    })</script>

动态props通信---组件与根节点(父子之间)

<div id="app2">
    <input v-model="parentMsg">
    <br>
    <child :parent-msg="parentMsg"></child></div><script>
    Vue.component('child', {
        props: ['parentMsg'],
        template: '<mark>{{ parentMsg }}<mark/>'
    });    new Vue({
        el: '#app2',
        data: {
            parentMsg: 'msg from parent!'
        }
    })</script>

• 对比分析：

• 例子1:

          		
  网友评论