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>
      <p>Parent: {{ message }}<input v-model="message"></p>
      <hr>
      Child:
      <my-component :parent-message.sync="message"></my-component>
    </p>
  </div>
</body>
</html>
 
Vue.component('my-component', {
      template: `<div>
                  {{ synMsg }}
                  <input v-model="synMsg">
                </div>`,
      props: {
        parentMessage: String
      },
      computed:{
        synMsg:{
          get(){
            return this.parentMessage
          },
          set(val){
            this.$emit('update:parentMessage',val)
          }
        }
      }
    });
​
    new Vue({
      el: '#app',
      data: {
        message: 'hello'
      }
    });
Output

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

Dismiss x
public
Bin info
chun-wenpro
0viewers