通过iframe父页面数据的改变进而调用iframe子页面中的函数

        在做一个演示DEMO有这样一个功能，通过iframe父页面点击按钮，切换iframe子页面中表格数据的变化。即通过iframe父页面点击按钮，传入不同的参数调用子页面中的函数。

（即点击科室，诊室或者医师传入不同的实参调用函数请求数据）

       我们都知道在Vue框架中我们可以通过将数据存储在Vuex中通过watch对数据进行监听，当数据发生改变的时候调用函数即可实现功能。但是在原生JS中并没有watch对数据进行监听。
而Vue的数据双向绑定原理是对data中的数据在**初始化的时候**监听起来**(Object.defineProperty 来进行监听/代理)**  当数据改变setter之后 vm就会知道   在视图改变getter  他就会通知模型你要修改了  模型改变了也会通知视图改变。那么我们只需要在iframe页面定义一个数据，通过按钮改变改数据。在子页面中通过 Object.defineProperty()定义的数据进行监听。当按钮改变了数据就会调用setter函数，从而调用iframe子页面中的函数。 

1. 在iframe父页面定义一个对象控制点击按钮传入的实参。

2. 在iframe子页面中通过 Object.defineProperty()，对该数据进行监听，当数据生改变则会调用该方法中的setter()，从而实现功能。

使用“top.data的方法是一种在嵌套的 iframe 子页面中访问父页面的全局变量的方式top’对象引用的是最顶层的窗口 (即浏览器窗口)，因此可以通过“top.data’来访问在最顶层窗门中定义的“data”变量。

 

浅谈Object.defineProperty()方法

该方法是直接在对象上定义一个新的属性，或者修改一个已存在的属性，它接受三个参数，

        a. 第一个参数为所要添加属性的对象。

        b. 第二个参数为所要添加或修改属性的属性名。

        c. 描述对象（配置项）

配置的key	作用	默认值
value	为所要添加或者修改的属性的属性值
writable	是否可以重写	false
enumerable	是否可以枚举	false
configurable	是否可以再次修改配置项	false
getter()	读取时内部调用的函数
setter(value)	写入时内部调用的函数，参数(value)为所修改的值

** 其中getter()与value 不能同时出现

** setter() 与 wriatable 不能同时出现

二、也可以通过点击按钮在iframe父页面调用子页面中的函数，通过contentWindow属性。

已：

        document.getElementById("childiframe").fun() // 获取到iframe标签,调用fun()函数。

但是这样iframe子页面函数的其他参数全部都要传递到外面，更不方便。所以通过Object.defineProperty()更胜一筹。