vue子组件和父组件双向绑定的几种方案

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<div id="app">
  <div>
    <span>v-model案例</span>
    <new-input v-model="name"></new-input>
  </div>
  <hr>
  <div>
    <span>模仿v-model实现案例</span>
    <two-model :show="showName" @input="changeShowName"></two-model>
    <h3 v-show="showName">我是一串要和内部名字联动的一串文字（父组件）</h3>
    <div @click="toggleShowName">父组件改变值带动（父组件）点一下试试</div>
  </div>
  <hr >
  <div>
    <span>.sync方案实现案例</span>
    <three-input :name.sync="name"></three-input>
  </div>
  <hr>
  <div id="">
    <div>这是父组件的东西。利用这个框改变值，看看有没有传到子组件，也可以改子组件看看这里有变化没</div>
    <input type="text" name="" id="" v-model="name" />
  </div>
</div>
<script>
  // v-model方案 你写上一个v-model的时候其实就是自动监听了input事件并且把取到的值赋值给当前值.
  Vue.component('new-input', {
    props: ['value'],
    data: function() {
      return {}
    },
    template: '<label>是个好人：<input type="text" v-model="newName" /></label>',
    methods: {},
    computed: {
      newName: {
        get() {
          return this.value;
        },
        set(value) {
          this.$emit('input', value);
        }
      }
    }
  });
  // 模拟v-model 他的意义在于没有里边没有input框也想实现这种,用在组件需要显示关闭的时候比较方便
  // 这个意义重大.
  Vue.component('two-model', {
    props: ['show'],
    data: function() {
      return {

      }
    },
    template: '<div><div @click="toggleShow">点击！！！显示/隐藏下方的名字可以影响父组件（子组件）</div><h1 v-show="nameShow">Army-海军（子组件）</h1></div>',
    methods: {
      toggleShow() {
        this.nameShow =!this.nameShow
      }
    },
    computed: {
      nameShow: {
        get() {
          return this.show;
        },
        set(value) {
          this.$emit('input', value);
        }
      }
    }

  });
  // 这里必须监听这个 update:name这个事件这个时候才能这样子写:name.sync="name"
  // 同时要加上在子组件里监听这个变量.否则只能子组件改变父组件,不能双向绑定
  // 还是用v-model更好理解和方便些吧
  Vue.component('three-input', {
    props: ['name'],
    data: function() {
      return {
        newName: this.name
      }
    },
    template: '<label><input type="text" @input="changeInput" v-model="newName" /> 你的名字：</label>',
    methods: {
      changeInput(val) {
        this.$emit("update:name", this.newName);
      }
    },
    computed: {},
    watch: {
      name() {
        this.newName = this.name;
      }
    }
  });
  new Vue({
    el: '#app',
    data: {
      name: 'Army-海军',
      showName: true
    },
    methods: {
      getNewName: function(newName) {
        this.name = newName;
      },
      changeShowName(val) {
        this.showName = val;
      },
      toggleShowName() {
        this.showName = ! this.showName
      }
    }
  });
</script>
</body>
</html>
直接复制到自己页面去测试即可。代码是最好读的。
Army-海军
原创文章 112 获赞 173 访问量 4万+
关注私信
vue子组件和父组件双向绑定的几种方案

猜你喜欢
