本文链接： https://blog.csdn.net/poppy995/article/details/98341901

组件键数据交互

父组件向子组件传值

组件内部通过props接收传递过来的值

Vue.component('menu-item',{
props:['title',...],//里面的值都是从父组件中传递过来的
template:'<div>{{title}}</div>'
  })

父组件通过属性将值传递给子组件

 <menu-item title='来自父组件的数据'></menu-item> 
 <!--虽然说是从父组件来的值，但实际是静态的值-->
  <menu-item :title='title'></menu-item>
  <!--动态的 在父组件中要有title这个属性值-->

实际上props中的就是给了子组件一个名称，还是需要在创建的标签中给这个名称赋予父组件的值

props属性名规则
在props中使用驼峰形式，模板中需要使用短横线形式，原因是DOM是不区分大小写的
在字符串形式的模板中是没有这个限制的
props属性值类型
字符串 String
数值 Number
布尔值 Boolean
数组 Array
对象 Object
基本用法
props传递数据原则：单向数据流子组件修改值是不会影响到父组件的值的
1. 子组件通过自定义事件向父组件传递信息
```
<button v-on:click='$emit("enlarge-text")'>扩大字体</button>
```
1. 父组件监听子组件的事件
```
 <menu-item v-on:enlarge-text='fontSize += 0.1></menu-item>
```
1. 带参数的只能是$event

非父子组件间传值

单独的事件中心管理组件间的通信
```
var eventHub =  new Vue()
```

监听事件与销毁事件

eventHub.$on('add-todo',addTodo)
eventHub.$off('add-todo')

触发事件

eventHub.$emit('add-todo',id)//可以携带参数

代码示例

 <body>
   <div id="app">
     <div>
       <button @click='handle'>销毁</button>
     </div>
     <test-tom></test-tom>
     <test-jerry></test-jerry>
   </div>
   <script src="./js/vue.js"></script>
   <script>
     //创建事件中心管理事件
     var hub = new Vue();
     //创建两个兄弟组件
     Vue.component('test-tom', {
       data: function () {
         return {
           num: 0
         }
       },
       template: `
         <div>
           <div> Tom:{{num}}</div>
           <button @click="handle">点击</button>
         </div>
       `,
       methods: {
         handle: function () {
           hub.$emit('jerry-event',1);
         }
       },
       mounted: function () {
         //监听事件
         hub.$on('tom-event', (val) => {
           this.num += val;
         })
       }
     });
     Vue.component('test-jerry', {
       data: function () {
         return {
           num: 0
         }
       },
       template: `
         <div>
           <div> Jerry:{{num}}</div>
           <button @click="handle">点击</button>
         </div>
       `,
       methods: {
         handle: function () {
           //触发兄弟组件的事件
           hub.$emit('tom-event',2);
         }
       },
       mounted: function () {
         //监听事件
         hub.$on('jerry-event', (val) => {
           this.num += val;
         })
       }
     });
     var vm = new Vue({
       el:'#app',
       data:{},
       methods:{
         handle:function(){
           hub.$off('tom-event');
           hub.$off('jerry-event');
         }
       }
     });
   </script>
 </body>

vue组件开发之组件之间的数据交互

组件键数据交互

父组件向子组件传值

非父子组件间传值

猜你喜欢