Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!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.0.3/vue.js"></script>
</head>
<body>
  <template id="temp">
    <div>
      <input v-model="myname">
      <button>{{myname}}</button>
    </div>
  </template>
  <div id="exp">
    <h3>父组件</h3>
      <input v-model="name">
      <button>{{name}}</button>
    <h3>子组件</h3>
      <child :sname="name" v-model="name"></child>
  </div>
</body>
</html>
 
Vue.component('child', {
      template: '#temp',
      props: ['sname'],
      data: function(){
        return {
          myname: this.sname
        }
      },
      watch: {
        sname: function(val){
          this.myname = val;
        },
        myname: function(val){
          this.$emit('input', val);
        }
      }
});
var vm = new Vue({
  el: '#exp',
  data: {
    name: 'zz'
  }
});
Output

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

Dismiss x
public
Bin info
mengQ99pro
0viewers