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>