[vue]实现父子组件数据双向绑定

参考: http://www.cnblogs.com/xxcanghai/p/6124699.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <switchbtn :result="result" @on-result-change="onResultChange"></switchbtn>
    <input type="button" value="change" @click="change">
</div>

<script src="node_modules/vue/dist/vue.js"></script>
<script>
  Vue.component("switchbtn", {
    template: "<div @click='change'>{{myResult?'开':'关'}}</div>",
    props: ["result"],
    data: function () {
      return {
        myResult: this.result//①创建props属性result的副本--myResult
      };
    },
    watch: {
      result(val) {
        this.myResult = val;//②监听外部对props属性result的变更，并同步到组件内的data属性myResult中
      },
      myResult(val) {
        //xxcanghai 小小沧海 博客园
        this.$emit("on-result-change", val);//③组件内对myResult变更后向外部发送事件通知
      }
    },
    methods: {
      change() {
        this.myResult = !this.myResult;
      }
    }
  });

  new Vue({
    el: "#app",
    data: {
      result: true
    },
    methods: {
      change() {
        this.result = !this.result;
      },
      onResultChange(val) {
        this.result = val;//④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
      }
    }
  });
</script>
</body>
</html>
posted @ 2018-07-28 22:48  mmaotai  阅读(178)  评论(0)  编辑  收藏  举报