angular移除事件绑定事件绑定-凯发ag旗舰厅登录网址下载

在vue.js的组件中，prop是“单向绑定”的，数据只能从父组件传输到子组件。vue文档中的说了这样做的原因：

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

用自定义事件向父组件发送数据

但是有时候的确需要由子组件从父组件获取更新的数据，这时候一个相对简单的方法就是——自定义事件。父组件监听事件，在事件的回调函数中得到数据。子组件emit事件，同时发送数据。

父组件

子组件

按下按钮前：

按下按钮后：

123和456表示的是父组件中变量abc的值，子组件按下按钮时，调用了this.$emit，第一个参数表示时间名，第二个参数就可以传递想要发送到父组件的数据了。

父组件这边则在子组件的html标签上监听同名的事件（@click="clickdata"），编写回调函数接收值并赋值给变量abc。

用自定义事件实现子组件prop双向绑定

更进一步，如果我们想改变传输到子组件的prop所绑定的父组件的变量，我们可以这样写：

父组件

子组件

这样子组件和父组件的值会同时变化。按下上面的123之前：

按下上面的123之后：

值456首先通过emit传递到了父组件，再被赋值给了父组件变量abc，再通过子组件绑定的prop传递回父组件，最终同时变化成功。这样也算实现了“双向绑定”。

使用.sync修饰符简化双向绑定代码

代码中的事件名“update:msg”仅仅是一个名字而已，不和prop名相同也可以。但是如果我们保持与prop名相同，vue为上面的代码提供了一个简写的形式：使用.sync操作符。使用它，事件名固定为了“update:prop名”的形式，我们也不需要自己写回调函数和绑定事件的代码了。

父组件

子组件

这段代码与上一部分实现相同的效果。

可以看到，.sync修饰符仅仅起到一个简化作用而已。

总结

以上是凯发ag旗舰厅登录网址下载为你收集整理的angular移除事件绑定事件绑定_vue.js子组件利用事件向父组件传输数据，以及sync修饰符和双向绑定...的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。