Vue父子界面传值

v-on: = @

父子界面传值

父组件给子组件

//父界面代码
<template>
	<childrenComponent :name="123">
<template>
//子界面代码
  export default {
    name: "",
    props: {
      name: {
        type: String
      }
    },
  }

子组件给父组件

//子组件
this.$emit('toP','msg')
//父组件接收
<template>
	<childrenComponent  @toP="toP">
<template/>
  export default {
    methods: {
    	toP(e){
    		console.log('从子组件传过来的值',e)
    	}
    }
  }

直接使用ref拿值

//子组件拿父组件的值
//子组件
export default {
    methods: {
    	clickEvent(e){
    		console.log(this.$parent.msg1)
    	}
    }
}
//父组件拿子组件的值  触发方法
//子组件
export default {
    data(){
    	return{
			msg:"data1"
		}
	},
	methods:{
		func(){
			console.log("父界面触发子界面方法",this.msg)
		}
	}
}
//父界面
<template>
	<childrenComponent ref="cC"/>
</template>
export default {
    methods:{
    	clickEvent(){
    		console.log(this.$refs.cC.msg)
    		console.log(this.$refs.cC.func)
    	}
    }
}