vue 父组件与子组件互传值

父组件

:msg=“centerDialogVisible” ：需要传给子组件的属性和值； v-on:listenTochildEvent="showMessageFromChild" ：监听子组件传过来的值

<login-name :msg="centerDialogVisible" v-on:listenTochildEvent="showMessageFromChild"></login-name>

注册组件，需要和上面的标签名一致，vue会自动使用 “-” 分开，

<script> //引用子组件的HTML内容 import LoginName from '../../components/popup/LoginPopup'; export default { components: {LoginName}, } </script>

子组件

在子组件使用props:[] 接收父组件传过来的值

export default { name: 'LoginName',//这个LoginName最好和引入的vue的LoginName相同 props:["msg"], }

这里向父组件传值使用 this.$emit(); listenTochildEvent ：对应父组件中的监听属性 this.returnParentData ：需要传过去的值

//登录成功向父组件App.vue传值，用于登录弹框的关闭和头像的显示 this.$emit("listenTochildEvent",this.returnParentData);

父组件接收子组件的值

使用标签中的showMessageFromChild方法，获取子组件的值

export default { components: {LoginName}, name: 'Home', methods: { //获取子组件弹框传过来的值 showMessageFromChild(data) { console.log(data) }, }

附：vue+elementUI 在父组件中调用子组件的内容，实现局部弹框

<el-dialog :title="dialogTitle" :visible.sync="centerDialogVisible" :append-to-body='true' :lock-scroll="false" width="420px" center> <div v-if="dialogTitle == '登录界面'"> <login-name :msg="centerDialogVisible" v-on:listenTochildEvent="showMessageFromChild"></login-name> </div> </el-dialog> <script> //引用子组件的HTML内容 import LoginName from '../../components/popup/LoginPopup'; export default { components: {LoginName}, name: 'Home', } </script>