vue-组件之间的通信：

组件之间的通信：
一个组件被调用，那么里面的数据就需要从前者调用，
因为在开发中组件时重复调用的，在页面中会反复使用，但是里面的数据是不一样的，
谁调用这个组件谁就传递数据给这个组件，
所以就要暴露一些接口，供外界传递数据，这就是组件之间的通信。

组件实例的作用域是孤立的/每个组件都是独立的，
这意味着不能并且不应该在子组件的莫版内直接引用父子组件的数据
但是父子组件之间需要通信：
父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件
父组件想要和子组件之间产生通信，想要一个机制来完成

在vue.js中，父子组件的关系可以总结为 props down （传下去）/ events up（传上来）
父组件通过 props向下传递数据给子组件
子组件通过 events给父组件发送消息

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <script src="../../vue.js"></script>

 </head>

 <body>

 <div id="app">

     <!-- 父组件-->

     <!--这个时候无论复制多少个组件，里面的内容都是一样的-->

     <!--在开发中，每个组件的内容应该是不相同的，这就意味着在父组件调用的时候把数据传递过来-->

     <!--.hj 与4对应-->

     <!--多个属性用空格隔开 hj="宇轩" imgsrc="" title="" ...-->

     <my-div hj="宇轩"></my-div>

     <my-div hj="叶孤城"></my-div>

     <my-div hj="北京"></my-div>

 </div>

 <!---->

 <template id="mu-div">

     <!--.hj 与 5对应-->

     <p>{{hj}}</p>

 </template>

 </body>

 <script>

     //1.创建组件

     Vue.component('my-div',{

         template:'#mu-div',

         props:['hj'],  //4.声明，父组件传递给子组件，(vue中不支持驼峰慢慢),多个属性用,号隔开

         data(){

             return{

                 hj:'西门吹雪'

             }

         }

     });

     var vm = new Vue({

         el:'#app',

         data:{}

     })

 </script>

 </html>

巴特西

vue-组件之间的通信：

最新文章

热门文章