Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
  </head>
<body>
  <div id="app">
    <p>Parent: {{ message }}<input v-model="message"></p>
    <hr>
    <p>
      Child:
      <my-component :parent-message="message" @update="selfUpdate"></my-component>
    </p>
  </div>
</body>
</html>
 
Vue.component('my-component', {
      template: `<div>
                  {{ parentMessage }}
                  <input v-model="message">
                  <button @click="updateText">Update</button>
                </div>`,
      props: {
        parentMessage: String
      },
      data() {
        return {
          message: this.parentMessage
        }
      },
      methods: {
        updateText() {
                      //事件名稱 value
          this.$emit('update', this.message); //this.message是指子層的噢！
        }
      }
    });
​
    new Vue({
      el: '#app',
      data: {
        message: 'hello'
      },
      methods: {
        selfUpdate(val) {
          this.message = val;
        }
      }
    });
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
chun-wenpro
0viewers