Vue组件的通信（组件的传值）

# 一、Vue组件的通信（组件的传值）

# 1.1 父传子 v-bind -- props 和 $refs

1. props
父：
    <HelloWorld :msg="str" />
    <HelloWorld :msg="str" ></HelloWorld>

子：
    props:['msg']
    props: {
        msg: String,
    },
***这种方式父传子很方便，但是父传给孙子辈分的组件就很麻烦（父=》子=》孙）
这种方式：子不能直接修改父组件的数据

2. $refs
引用信息会注册在父组件的$refs对象上
父组件可直接修改子组件的值

  <List ref='child'></List>
  this.$refs.child.xxx = 'yyyy';

1
2

依赖注入优势：父组件可以直接向某个后代组件传值(不让一级一级的传递)


   // 父组件 提供一个名为message的数据
   <template>
      <div>
         <h1>我是祖先组件</h1>
         <child-component></child-component>
      </div>
   </template>
   <script>
      import ChildComponent from './ChildComponent.vue'

      export default {
         name: 'AncestorComponent',
         components: {
            ChildComponent
         },
         data(){
             return {
                 myMessage: "父亲自己的"
             }
         },
         // 提供一个名为message的数据
         // provide可以是一个对象，也可以是一个返回对象的函数
         provide: {
            message: 'Hello from ancestor',
            myMessage: this.myMessage,
            setMessage: this.setMessage
         },
         // provide() {
         //     return {
         //        message: 'Hello from ancestor'
         //     }
         // }
         methods: {
             setMessage() {
                this.myMessage = "我被改变了"
             }
         }
      }
   </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40


   // 子孙组件 提供一个名为message的数据
   <template>
      <div>
         <h2>我是后代组件</h2>
         <p>{{ message }}</p>
      </div>
   </template>

   // 后代组件
   <script>
      export default {
         name: 'ChildComponent',
         // 接收一个名为message的数据
         inject: ['message','setMessage','myMessage'],
         mounted() {
            console.log(this.message); // 使用注入的数据
            this.setMessage(); // 使用注入的方法
         }
      }
   </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 1.2 子传父 $emit

子：
    <button @click="changeParentName">改变父组件的name</button>
    export default {
        methods: {
            //子组件的事件
            changeParentName: function() {
                this.$emit('handleChange', 'Jack') // 触发父组件中handleChange事件并传参Jack
                // 注：此处事件名称与父组件中绑定的事件名称要一致
            }
        }
    }

父：
    <child @handleChange="changeName"></child>
    methods: {
        changeName(name) {  // name形参是子组件中传入的值Jack
            this.name = name
        }
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 1.3 兄弟组件传值 on和emit

Event Bus: 创建一个事件中心，通过它来发射和监听事件，进而传递数据。创建bus作为中转

import Vue from "vue";
export default new Vue;
import { EventBus } from './event-bus.js';

1
2
3

A组件：
<button @click='btn'>HelloWorld按钮</button>
data () {
    return {
      hlStr:"这是helloWorld组件的数据"
    }
},
methods:{
    btn(){
      EventBus.$emit('selectItem',this.hlStr);
    }
}

B组件：
created(){
		EventBus.$on('selectItem',(val)=>{
			console.log( val , 1111);
		})
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 1.4. 子组件直接使用父组件的数据

子组件通过：this.$parent.xxx使用父组件的数据
这种方式：子可以直接修改父组件的数据

# 1.5 如何找到根组件

this.$root

← computed、methods、watch区别 slot插槽→