父子组件之间的通信

发表于 | 分类于
字数统计: 463 word | 阅读时长 ≈ 2 min
父组件向子组件传递信息 通过props属性

eg: 父组件的data属性里有message和movies两个属性，现在要实现将这两个属性的内容传递给子组件，并在子组件中进行显示。

  • 方法：在子组件中定义props属性，在父组件中引入子组件时，将props中的属性和父组件中的message和movies做一个绑定即可
子组件向父组件传递信息 通过 this.$emit(‘event’,[args])

eg: 子组件里有一个简单的三个button按钮的导航栏，点击不同的按钮时，会将次按钮的信息传递给父组件，并在父组件中进行显示

  • 方法： 在父组件中进行方法绑定
code
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>父子组件通信</title>
  <script src="vue.min.js"> </script>
</head>

<body>

  <!-- 父组件 -->
  <div id="app">
    <cpn :cmovies="movies" :cmessage="message" @itemclick="cpnclick"></cpn>
  </div>

  <!-- 子组件 -->
  <template id="cpn">
    <div>
      <button v-for="item in categories" @click="itemclick(item)"> {{item.name}} </button>
      <h2>{{cmessage}}</h2>
      {{cmovies}}
    </div>
  </template>

  <script>
    //子组件
    const cpn = {
      template: '#cpn',
      props: {
        cmovies: Array,
        cmessage: String
      },
      data() {
        return {
          categories: [
            { id: 1, name: '热门推荐' },
            { id: 2, name: '手机数码' },
            { id: 3, name: '家用办公' }
          ]
        }
      },
      methods: {
        itemclick(item) {
          this.$emit('itemclick', item)
          
        }
      }
    }
    //父组件  将父组件中的message和movies传递给子组件来显示
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊',
        movies: ['海王', '海尔兄弟', "加勒比海盗"]
      },
      components: {
        cpn   //注册子组件
      },
      methods: {
        cpnclick(item) {
          console.log(item) //打印子组件传递的按钮信息
        }
      }
    })
  </script>
</body>

</html>
0%