父=>子传值
父往子传值，父组件需要在子组件标签内绑定，子组件用props接一下即可
父组件：
<template>
<div id="parent">
<input type="text" v-model="msg" />
{{msg}}
<Child :msg="msg"></Child>
</div>
</template>
<script>
import Child from "./components/child";
export default {
components: {
Child
},
data() {
return {
msg: "父组件值传给子组件的值"
};
}
};
</script>
子组件
<template>
<div>
<div>子组件值:</div>
{{msg}}
</div>
</template>
<script>
export default {
props: ["msg"]
};
</script>
子=>父传值
通过子组件$emit（arg1,arg2）函数，把值传出来。
arg1:方法名字（这个名字在父组件中需要保持一致）
arg2:要传出的值
这里也可以简写成@click="$emit('toParent',msg)"
子组件：
<template>
<div>
<div>我要发送给父组件的值：{{msg}}</div>
<button @click="toParent">向父组件发送信息</button>
</div>
</template>
<script>
export default {
data() {
return {
msg: "我是子组件，我要给父组件传值",
};
},
methods: {
toParent() {
this.$emit("toParent", this.msg);
}
}
};
</script>
父组件：
父组件可以通过$event来接受子组件传出来的值.
简单的写法为@toParent="msg = $event"
<template>
<div id="parent">
<input type="text" v-model="msg" />
{{msg}}
<Child :msg="msg" @toParent="getMsg"></Child>
</div>
</template>
<script>
import Child from "./components/child";
export default {
components: {
Child
},
data() {
return {
msg: "父组件值传给子组件的值"
};
},
methods: {
getMsg(msg) {
this.$emit("toParent", this.msg);
}
};
</script>
