父组件
: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>