Vue组件间的通信

十

        <div id="app">     //3调用模板会强制传参

            <my_div mesg='heihei' imgstr='img/123.jpg'></my_div>

            <my_div mesg='haha' imgstr='img/456.jpg'></my_div>

        </div>

          

        <template id="testimg">//1、配置模板中的参数

            <div>

                <p>{{mesg}}</p>

                <img :src='imgstr' width="200px"/>

            </div>

        </template>

   

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            Vue.component('my_div',{

                template:'#testimg',//2、与模板中的参数关联

                props:['mesg','imgstr']

            })

            new Vue({

                el:'#app'

            });

        </script>