vue3 父子组件传值和方法

vue3 父子组件传值和方法

1.子传父

1.1 利用defineExpose 传方法和值

// 子组件 PlotProjectForm.vue 
<script setup>
import { ref, defineExpose } from 'vue';
import { Form } from 'ant-design-vue';

const visible = ref(false);

const showModal = () => {
  visible.value = true;
};

// 主动暴露方法/值
defineExpose({ visible, showModal})
</script>

// 父组件

<template>
  <PlotProjectForm ref="plotProjectFormRef" />
</template>

<script>
import { ref, onMounted } from 'vue'
import PlotProjectForm from '../components/Form/PlotProjectForm.vue'

export default {
  components: {
    PlotProjectForm,
  },
  setup() {
    
    const plotProjectFormRef = ref(null); // 子组件实例

    const showForm = () => {
      console.log(plotProjectFormRef.value.visible)
      plotProjectFormRef.value.showModal()
      console.log(plotProjectFormRef.value.visible)
    };
    
	return { plotProjectFormRef }
  }
}

1.2 利用emit传值

// 父组件
<template>
  <PlotProjectForm @cancelInfo="getCancelInfo" />
</template>

<script setup>
const isPlotInfo = ref(false)        // 确定是否绘制
const getCancelInfo = (value) => {
  isPlotInfo.value = value
  console.log(isPlotInfo.value)
}

console.log(isPlotInfo.value)
<script>

// 子组件
<script setup>
import { ref, defineEmits } from 'vue';

const visible = ref(false)

const emit = defineEmits(['cancelInfo'])

const handleCancel = () => {  // 处理点击取消按钮事件
  visible.value = false;
  emit('cancelInfo', visible.value)
};

<script>

2.父传子

1.1 利用defineProps传值

// 父组件
<template>
  <PlotProjectForm :fatherTitle="title" />
</template>

<script>
import { ref, onMounted } from 'vue'
import PlotProjectForm from '../components/Form/PlotProjectForm.vue'

export default {
  components: {
    PlotProjectForm,
  },
  setup() {
    const title = ref("-----这是父组件的标题-----")
    const printHello = () => {
    	console.log("hello")
    }
    return { title, printHello }
  }
}
<script>

// 子组件
<script setup>
import { ref, defineExpose } from 'vue';

const props = defineProps({
	fatherTitle:{
		type:String,  //类型字符串
		default:'默认标题' //如果没有传递msg参数,默认值是这个
	},
})

console.log(props.fatherTitle)
<script>

1.2 利用emit传方法

// 父组件
<template>
<PlotProjectForm @onMySonFunc="funcToSon" />
</template>

<script setup>
const funcToSon = (name, id)=>{
  console.log(name)
	console.log("子组件调用了父组件的funcToSon()方法",id)
};
</script>

// 子组件
<script setup>
import { ref, defineExpose } from 'vue';

const emit = defineEmits(['onMySonFunc'])

emit("onMySonFunc","调用父组件的方法",666666)
</script>