vue 父子组件传值：props和$emit
<!--子组件页面-->
<template>
<div class="hello">
<!-- 添加一个input输入框 添加keypress事件-->
<input type="text" v-model="inputValue" @keypress.enter="enter">
<p>{{mes}}</p>
</div>
</template>
<script>
export default {
props:['mes'],
// 添加data, 用户输入绑定到inputValue变量，从而获取用户输入
data: function () {
return {
inputValue: ''
}
},
methods: {
enter () {
this.$emit("sendiptVal", this.inputValue)
//子组件发射自定义事件sendiptVal 并携带要传递给父组件的值，
// 如果要传递给父组件很多值，这些值要作为参数依次列出 如 this.$emit('valueUp', this.inputValue, this.mesFather);
}
}
}
</script>
<!--父组件页面-->
<template>
<div>
<p> father</p>
<accept-and-refuse :mes=loginJson.animal @sendiptVal='showChildMsg'></accept-and-refuse>
</div>
</template>
<script>
import AcceptAndRefuse from '@/components/public/AcceptAndRefuse'
export default {
data() {
return {
message:'hello message',
loginJson:{
"animal":"dog"
}
},
mounted(){
},
methods: {
components:{
AcceptAndRefuse
}
}
</script>
<style>
</style>
简单来说就是父组件在调用子组件的地方:mes=loginJson.animal 这样把值传过去，子组件props接收，子组件想更新父组件的时候在触发的地方$emit("父组件的方法名"，要传的值)，父组件那边在调用子组件的地方写 相同的方法名
vue 父调用子组件的方法
用法： 子组件上定义ref="refName", 父组件的方法中用 this.$refs.refName.method 去调用子组件方法
详解： 父组件里面调用子组件的函数，父组件先把函数/方法以属性形式传给子组件；那么就需要先找到子组件对象 ，即 this.$refs.refName.
然后再进行调用，也就是 this.$refs.refName.method