网站关键词调整 收录,东营利津网站建设,c语言开发网站,怎样开通微信公众号平台在我们编写前端代码时#xff0c;经常遇到的一种场景#xff0c;子组件需要使用父组件的值#xff0c;这种情况下#xff0c;我们可以使用props帮助我们进行父子组件间的通信。这里我们先模拟一个场景#xff0c;展示如何使用。场景#xff1a;在父组件修改值#xff0c… 在我们编写前端代码时经常遇到的一种场景子组件需要使用父组件的值这种情况下我们可以使用props帮助我们进行父子组件间的通信。这里我们先模拟一个场景展示如何使用。 场景在父组件修改值传递给子组件子组件进行显示如下图所示。场景原型实现(1)子组件定义与使用1、定义子组件subOneComponent.vue在props中定义父组件传递的值props: { inputValue: { type: String, // 变量类型 default: function () { // 默认返回值可以在此处对传过来的值进行操作 return } } },2、在子组件中展示(2)父组件引用子组件与传值1、父组件引用子组件import subOneComponent from /components/subOneComponent; export default { name: App, components: { subOneComponent }, data() { return { inputValue: , } }, }2、在子组件中绑定再此父组件中修改inputValue值后将会传递给子组件。结果展示实现结果VUE中父组件向子组件传递值是单向数据流 所有的prop都使得其父子prop之间形成一个单向下行绑定父级prop的更新会向下流动到子组件中但是反过来则不行。这样会防止从子组件意外改变父级组件的状态从而导致你的应用的数据流向难以理解。 每次父级组件发生更新时子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。vue传值除了传字符串以外还可以传递数字、数组、布尔值、对象等。
