Vue组件化开发--组件通信方式-父传子、子传父、非父子组件传值

1
2
3
4
5
6
7
8
props: {
    showMessage: {
        type: String,
        default: "默认showMessage的值"
    }
}

1
2
3
4
<show-info :age="100" showMessage="我的个人信息"/>

<show-info :age="100" show-message="我的个人信息"/>

1
2
3
4
export default {
	inheritAttrs: false
}

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
<template>
    <!-- 展示个人信息的组件 -->
    <!-- 如果当前的属性是一个非prop的attribute, 那么该属性会默认添加到子组件的根元素上 -->
    <show-info name="jack" 
               :age="25" 
               :height="1.78" 
               address="广州市" 
               abc="cba" 
               class="active" />

</template>

<script>
    // 导入子组件
    import ShowInfo from './ShowInfo.vue'

    export default {
        // 局部注册子组件
        components: {
            ShowInfo
        }
    }
</script>

<style scoped>
</style>

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
41
42
43
44
45
46
47
48
49
50
51
52
<template>
    <div class="infos">
        <!-- 获取继承而来的class属性 -->
        <h2 :class="$attrs.class">姓名: {{ name }}</h2>
        <h2>年龄: {{ age }}</h2>
        <h2>身高: {{ height }}</h2>
        <h2>Message: {{ showMessage }}</h2>
    </div>
	<!-- v-bind="$attrs 一次性把所有继承而来的属性全部绑定到当前元素上面 -->
    <div class="others" v-bind="$attrs"></div>
</template>

<script>
    export default {
        //inheritAttrs: false,		// 设置不允许属性继承
        props: {					// props对象语法定义属性
            name: {
                type: String,
                default: "我是默认name"
            },
            age: {
                type: Number,
                required: true
            },
            height: {
                type: Number,
                default: 1.75
            },
            // 对象类型写默认值时, 需要编写default的函数, 函数返回默认值
            friend: {
                type: Object,
                default() {
                    return { name: "james" }
                }
            },
            hobbies: {
                type: Array,
                default: () => ["篮球", "rap", "唱跳"]
            },
            showMessage: {
                type: String,
                default: "我是showMessage"
            }
        }
    }
</script>

<style scoped>
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
  <div class="add">
    <button @click="btnClick(1)">+1</button>
    <button @click="btnClick(5)">+5</button>
    <button @click="btnClick(10)">+10</button>
  </div>
</template>

<script>
  export default {
    methods: {
      btnClick(count) {
        // 当btnClick方法被调用时，子组件会发出去一个自定义事件
        // 第一个参数自定义的事件名称
        // 第二个参数是传递的参数
        this.$emit("add", count)
      }
    }
  }
</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
<template>
  <div class="app">
    <h2>当前计数: {{ counter }}</h2>

    <!-- 并且监听组件add-counter内部的add事件 -->
    <add-counter @add="addBtnClick"></add-counter>
  </div>
</template>

<script>
  //导入组件
  import AddCounter from './AddCounter.vue'

  export default {
    // 注册组件
    components: {
      AddCounter,
    },
    data() {
      return {
        counter: 0
      }
    },
    methods: {
      // 子组件中add事件触发时，将调用此方法
      addBtnClick(count) {
        this.counter += count
      },
    }
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
  <div class="add">
    <button @click="btnClick(1)">+1</button>
    <button @click="btnClick(5)">+5</button>
    <button @click="btnClick(10)">+10</button>
  </div>
</template>

<script>
  export default {
    // emits数组语法（把发出的自定义事件全部写到这里面）
    // 相当于把发出的事件进行注册说明一下，这个写法是非必须的
    emits: ["add"],
    methods: {
      btnClick(count) {
        this.$emit("add", count)
      }
    }
  }
</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
<template>
  <div class="add">
    <button @click="btnClick(1)">+1</button>
    <button @click="btnClick(5)">+5</button>
    <button @click="btnClick(10)">+10</button>
  </div>
</template>

<script>
  export default {
    // emmits对象语法，对参数count进行验证
    emits: {
      add: function(count) {
        if (count <= 10) {
           return true
        }
        return false
      }
    },
    methods: {
      btnClick(count) {
        console.log("btnClick:", count)
        this.$emit("add", 100)
      }
    }
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <div class="app"></div>
</template>

<script>
  import Home from './B.vue'
  export default {
    components: {
      B
    },
    // provide一般都是写成函数
    provide() {
      return {
        name: "张三",
        age: 25
      }
    }
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <div class="app"></div>
</template>

<script>
  import Home from './C.vue'
  export default {
    components: {
      C
    },
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
<template>
  <div class="banner">
    <h2> {{ name }} - {{ age }}</h2>
  </div>
</template>

<script>
  export default {
    inject: ["name", "age"]
  }
</script>

1
2
num install mitt -s

1
2
3
4
import mitt from 'mitt'
const emitter = mitt()
export default emitter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
    <div>
        <h1>A组件</h1>
        <button @click>
            按钮
    	</button>
    </div>
</template>
<script>
  import emitter from '../plugins/event-bus.js'
  export default {      
      created(){
          emitter.emit("fn",{name:'张三',age:19})
      }
  }
</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
<template>
    <div>
    	<h1>B组件</h1>
        {{ str }}
    </div>
    </template>
<script >
  import emitter from '../plugins/event-bus.js'
  export default {      
      created(){
          // 监听fn事件
          emitter.on("fn",msg=>{
              console.log(msg);
          });
      },
      methods: {
          eventHandler() {
              console.log("已经终止事件监听")
          }
      },
      unmounted() {
          // 取消监听fn函数
          eventBus.off("fn", this.eventHandler)
      }
  }
</script>