vue中组件通讯--子到父

Posted 2021-02-12 mushitianya

步骤：

• 父组件提供一个方法
• 这个方法是子组件调用的，数据通过方法的参数拿到
• 将这个方法传递给子组件
• 由子组件触发这个方法，将要传递的数据作为方法的参数传递

  <div id="app">
    <h1>{{ age }}</h1>

    <!-- 2 给子组件传递一个自定义事件 getmsg ，它的值是 getChildMsg 方法 -->
    <child @getmsg="getChildMsg"></child>
  </div>

  <script src="./vue.js"></script>
  <script>
    // 子到父：
    // 子组件：child组件
    // 父组件：vm实例

    const vm = new Vue({
      el: '#app',
      data: {
        age: 0
      },
      // 1 准备一个方法
      methods: {
        getChildMsg(data) {
          console.log('接受到子组件传递过来的数据为：', data)
          this.age = data
        }
      },
      components: {
        child: {
          template: `
            <div>
              <button @click="fn">传递数据给父组件</button>
            </div>
          `,
          methods: {
            fn() {
              // 3 触发父组件中传递过来的方法
              this.$emit('getmsg', 19)
            }
          }
        }
      }
    })
  </script>