网站动态图怎么做,织梦系统做的网站打开慢,免费crm试用,邯郸网站制作与建设在Vue.js的组件中#xff0c;prop是“单向绑定”的#xff0c;数据只能从父组件传输到子组件。Vue文档中的说了这样做的原因#xff1a;所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定#xff1a;父级 prop 的更新会向下流动到子组件中#xff0c;但是反过来则…在Vue.js的组件中prop是“单向绑定”的数据只能从父组件传输到子组件。Vue文档中的说了这样做的原因所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定父级 prop 的更新会向下流动到子组件中但是反过来则不行。这样会防止从子组件意外变更父级组件的状态从而导致你的应用的数据流向难以理解。用自定义事件向父组件发送数据但是有时候的确需要由子组件从父组件获取更新的数据这时候一个相对简单的方法就是——自定义事件。父组件监听事件在事件的回调函数中得到数据。子组件emit事件同时发送数据。父组件templatediv idappHelloWorld clickclickData /div {{abc}} /div/div
/templatescript
import HelloWorld from ./components/HelloWorld.vue;
export default {name: App,components: {HelloWorld,},data() {return {abc: 123}},methods: {clickData (value) {this.abc value}},
};
/script
子组件templatediv classhellobutton clickclickadd按下/button/div
/templatescript
export default {name: HelloWorld,methods: {clickadd () {this.$emit(click, 456)}}
}
/script
按下按钮前按下按钮后123和456表示的是父组件中变量abc的值子组件按下按钮时调用了this.$emit第一个参数表示时间名第二个参数就可以传递想要发送到父组件的数据了。父组件这边则在子组件的html标签上监听同名的事件clickclickData编写回调函数接收值并赋值给变量abc。用自定义事件实现子组件prop双向绑定更进一步如果我们想改变传输到子组件的prop所绑定的父组件的变量我们可以这样写父组件templatediv idappHelloWorld :msgabc update:msgclickprop/div {{ abc }} /div/div
/templatescript
import HelloWorld from ./components/HelloWorld.vue;
export default {name: App,components: {HelloWorld,},data() {return {abc: 123,};},methods: {clickprop(value) {this.abc value}},
};
/script
子组件templatediv classhellodiv iddemo clickclickadd{{ msg }}/div/div
/templatescript
export default {name: HelloWorld,inhertAttrs: true,props: {msg: {type: String,}},data: function() {return {}},methods: {clickadd () {this.$emit(update:msg, 456)}}
}
/script
这样子组件和父组件的值会同时变化。按下上面的123之前按下上面的123之后值456首先通过emit传递到了父组件再被赋值给了父组件变量abc再通过子组件绑定的prop传递回父组件最终同时变化成功。这样也算实现了“双向绑定”。使用.sync修饰符简化双向绑定代码代码中的事件名“update:msg”仅仅是一个名字而已不和prop名相同也可以。但是如果我们保持与prop名相同Vue为上面的代码提供了一个简写的形式使用.sync操作符。使用它事件名固定为了“update:prop名”的形式我们也不需要自己写回调函数和绑定事件的代码了。父组件templatediv idappHelloWorld :msg.syncabc /div {{ abc }} /div/div
/templatescript
import HelloWorld from ./components/HelloWorld.vue;
export default {name: App,components: {HelloWorld,},data() {return {abc: 123,};},methods: {},
};
/script
子组件templatediv classhellodiv iddemo clickclickadd{{ msg }}/div/div
/templatescript
export default {name: HelloWorld,inhertAttrs: true,props: {msg: {type: String,}},data: function() {return {}},methods: {clickadd () {this.$emit(update:msg, 456)}}
}
/script
这段代码与上一部分实现相同的效果。可以看到.sync修饰符仅仅起到一个简化作用而已。
