对vue的props实现双向数据流

vue官网中规定， vue中的Prop是单向数据流

在vue中，组件中的Prop是单向绑定的，父组件的Prop的更新会向下流向到子组件中，但是反过来则不行。这样做是为了防止从子组件意外改变父组件的状态，从而导致应用的数据流向难以理解。

如果在子组件中改变父组件的某个Prop值，控制台会发出警告，但是在实际的实践中，我们还是会遇见需要改变父组件Prop的情况。

使用组件时，一开始绑定某Prop的值，在后续交互中，需要根据情况改变父组件中Prop的值，在这种场景下，我们要实现的是类似于数据双向绑定的功能，此时我们可以用到的方法有：

你可以引入Vue-resource,使用this$>

mainjs这样配置

同时Vue这样请求

express后台这样就能接收到post过来的数据，这是最简单的一种用法

OK，前台也拿到了请求的数据

1、vue端
2、iOS端

在wkwebview代理方法 - ( void )userContentController:(WKUserContentController )userContentController didReceiveScriptMessage:(WKScriptMessage )message 中实现

messagebody会打印vue传来的{ a: '1' }

IOSCallVue被执行，打印“12345”内容

vue组件之间的关系有父子组件、同级组件以及孙父子三级关系、还有更复杂的四级、五级关系，那他们之间的数据以及方法如何传递，也就是父子组件、同级组件、孙子组件等如何调用各自的变量、方法呢？

前面博主已经讲了同组件和父子组件的交互，那如果两个没有任何关系的组件或者更复杂的孙与子的三级组件、四级组件之间怎么交互？

这时再用前面所说的方法已经做不到了或者说很难实现了
这时就要用消息订阅与发布组件Pubsub了，他可以在任意组件之间实现交互

首先在终端使用一下指令安装PubSub

安装成功就能在这里看到pubsub-js

在要使用的组件中引入pubsub-js，这个不能全局引入只能哪个组件中使用就在哪个组件中引入

在被调用的组件中使用 PubSubsubscribe(name,function)订阅消息

被调用组件

在调用组件使用 PubSubpublish(name,data);发布消息

前端通信框架。
axios：前端通信框架，因为vue的边界很明确，就是为了处理DOM，所以并不具备通信功能，此时就需要额外使用一个通信框架与服务器交互，当然也可以使用jQuery提供的AJAX通信功能。
axios有非常多的优点并且用起来也非常方便，它支持在浏览器中发送XML>写个简单的吧
aphp
<form method="post" action="bphp">
<input type="text" name="test" value="">这是你要提交的数据
<input type="submit" value="提交">
</form>
点击提交按钮就跳到b页面了
bphp
echo $_POST['test']；
打印a提交过来的数据，如果有数据你就自己写sql语句存入数据库就好了

vue是属于MVVM模式的框架，数据交互其实很简单的，它是通过在data里面设置参数变量，然后在方法里面通过this来点这个变量，把需要交互的数据通过这样的方式渲染到页面上去。
例如你在页面上写了 <div>{{message}}</div> 那么你就可以在data里面设置一个 message参数变量，如下：
export default {
data () {
return {
message: '默认显示内容'
}
}
}
然后在方法里面通过 thismessage = ‘新的内容’;
这样的方式来修改。vue还有生命周期，根据实际情况在不同的周期写方法来实现想要的功能就可以了。

---