父组件

: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>