vue => 子元件到父元件的通訊

weixin_34377065發表於2017-12-26
Vue元件
<!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'],
          template: `<button @click="test">子元件傳遞資料給父元件</button>`,

          methods: {
            test() {
              // 通過 this.$emit 方法來觸發事件（此處是，pfn）
              // 第二個引數，表示要傳遞個父元件的資料
              //    內部：呼叫父元件的 parentFn('這是子元件中傳遞的資料')
              this.$emit('pfn', '這是子元件中傳遞的資料')
            }
          },
        }
      }
    })
  </script>
</body>

</html>
複製程式碼

在這裡賴活還是好死 在於不在 沒那麼重要

相關文章