vue.js html 相互传值,vue.js父子组件之间通过Prop传值

前言：本文主要记录父子组件之间通过prop进行数据传递的方法一，即将Prop中的值赋值给本地定义的属性，不涉及Prop的其他特性

父组件向子组件传值

先写一个简单的子组件，内容如下

{{msg}}

export default {

name: 'child',

props: ['msg'],

复制代码

然后在父组件中引入子组件

import child from '../components/child';

export default {

name: 'parent',

components: {

child,

},

复制代码

使用

复制代码

也可以通过绑定data中定义的变量来实现动态修改

html

复制代码

js

data() {

return {

message: 'hello world',

};

},

复制代码子组件向父组件传值

如果直接在子组件中修改prop，Vue会发出警告，因为prop属于单向数据流，即父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，所以这里有两种常见的方法在子组件中修改prop传递的值。

[1] 本地定义一个变量，并将prop作为初始值

data: function () {

return {

message: this.msg

}

复制代码[2] prop 以一种原始的值传入且需要进行转换，在computed中定义

computed: {

normalizedSize: function () {

return this.size.trim().toLowerCase()

}

}

复制代码

方法一：

先在子组件的data中定义一个变量并把prop作为初始值

js

data: function () {

return {

message: this.msg

}

复制代码

添加一个输入框并双向绑定data中的变量message和添加一个事件

html

复制代码@keydown.enter为键盘的enter键点击触发事件

js

methods: {

onChange() {

this.$emit('childFn', this.message);

},

},

复制代码

通过$emit向父组件发送一个事件，关于此方法详情请查看文档vue自定义事件

然后在父组件中添加监听子组件事件的方法

html

//监听子组件触发的事件,然后调用parentFn方法

复制代码

js

methods: {

parentFn(payload) {

this.message = payload;

},

复制代码