vue => 子组件到父组件的通讯

2017-12-11  本文已影响21人  想做一个画家
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <h1>父组件:这是子组件传递过来的数据 --- {{ msg }}</h1>

    <!-- 此处的方法 pfn 就是父组件中提供的属性 -->
    <!-- pfn 是父组件给子组件提供的一个属性(事件),它的值是父组件中的一个方法 -->
    <child v-on:pfn="parentFn"></child>
  </div>
  
  <script src="./vue.js"></script>
  <script>
    // 子组件传递数据给父组件:
    // 1 由父组件提供的一个方法(这个方法用来接受子组件传递过来的数据)
    // 2 这个方法需要让子组件来调用
    // 3 在子组件中调用父组件的方法,将要传递的数据作为 父组件方法的参数 进行传递

    // Vue 实例看作是 父组件
    var vm = new Vue({
      el: '#app',
      data: {
        msg: ''
      },

      methods: {
        parentFn( arg ) {
          console.log(arg);

          this.msg = arg
        }
      },

      // 创建组件
      components: {
        // 子组件
        child: {
          props: ['msg', 'abc'],
          template: `<button @click="test">子组件传递数据给父组件</button>`,

          methods: {
            test() {
              // 通过 this.$emit 方法来触发事件(此处是,pfn)
              // 第二个参数,表示要传递个父组件的数据
              //    内部:调用父组件的 parentFn('这是子组件中传递的数据')
              this.$emit('pfn', '这是子组件中传递的数据')
            }
          },

          // created() {
          //   this.$emit('pfn', 'adsfasdfdsfa')
          // }
        }
      }
    })
  </script>
</body>

</html>
点击按钮的时候完子到父组件的通讯.png

在这里赖活还是好死
在于不在
没那么重要

上一篇 下一篇

猜你喜欢

热点阅读