vue父子组件通信

一、父组件向子组件传参    （非vue3语法糖）

父组件-传递参数：

<template>  <div>
    <p class="father">父组件</p>
    <child :roomid="id"></child>
  </div>
</template>

<script>
import child from './child'
export default {
  components: {
    child
  },
  data() {
    return {
      id:'1234' // 父组件向子组件传的值
    }
  }
}
</script>

子组件-接收参数

<script>
export default {
  props: { roomid: String },  //父组件传入参数
  data() {
    return {
      rtmindexconfig: "",
      seen: false,
      controlinfo: {
        dynamicHtml: "",
      }
    };
  },
  setup(props) {
    //可以取出传入的参数
    console.error("props", props);
  },
  mounted() {
    this.k_room_camera();
  },
  methods: {
    k_room_camera() {
     //方法中使用this.xxx就可取出父组件传入的参数
      console.error(this.roomid);
    }
  }
};
</script> 

说明：

①roomid是在子组件中绑定要传的值，记住“=”前的roomid要和子组件中要接受的变量名要一致。

②在子组件中用props来接受传入的值，可以写成对象类型，规定类型和默认值，也可以直接写成字符串。

③在子组件中可以直接使用，也可以在函数中使用this.roomid进行访问。

二、子组件调用父组件方法并传参    （非vue3语法糖）

父组件-方法接收：

<template>
  <div>
    <p class="father">父组件</p>
　 <WebCam @getcamInfo="getcamInfo"></WebCam>
  </div>
</template>

<script>
import WebCam from "./WebCam.vue";
export default {
  components: {
    child
  },
  data() {
    return {
      childSid:'' // 接收子组件的值
    }
  },
  methods: {
    getcamInfo(val) {
       this.childSid=val;
       console.error(val);
    }
  }
}
</script>

子组件-调用并传参：

<template>
  <div>
    <p class="child">子组件</p>
    <button @click="valueClick">传值</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    valueClick() {
      this.$emit("getcamInfo","参数值");
    }
  }
}
</script>

二、子组件调用父组件方法并传参    （vue3语法糖）

父组件-方法接收值

<template>
  <div>
    <p class="father">父组件</p>
　 <WebCam @getcamInfo="getcamInfos"></WebCam>
  </div>
</template>

<script setup>
import WebCam from "./WebCam.vue";
getcamInfos(val) {
    console.error(val);
  }
</script>

子组件-调用并传参

<template>
  <div>
    <p class="child">子组件</p>
    <button @click="valueClick">传值</button>
  </div>
</template>

<script setup>
const emits = defineEmits("getcamInfo");  //调用父组件方法名
function valueClick() {
  emits("getcamInfo","参数值");
}
</script>

二、父组件给子组件传参    （vue3语法糖）

父组件：

<template>
  <div>
    <p class="child">父组件</p>
    <TimeTable :configinfo="t_tableconfig" />
    <button @click="valueClick">传值</button>
  </div>
</template>

<script setup>
import TimeTable from "@/components/Dialog/TimeTable.vue";
import { ref } from "vue";
const t_tableconfig = ref({});
function valueClick(){
    //向子组件传参
    t_tableconfig.value = { roomid: “值”, config: “值” };
}
</script>

子组件

<template>
  <div>
    <p class="child">子组件</p>
    
    <button @click="valueClick">传值</button>
  </div>
</template>

<script setup>
import TimeTable from "@/components/Dialog/TimeTable.vue";
import { ref,watch } from "vue";
//接参
const props = defineProps({
  configinfo: {
    type: Object,
    default: () => {}
  }
});
init();
function init() {
 //取出来父组件传的参数
  console.error(props);
  console.error(props.configinfo.config);
}
//可以监听，值变化时的操作
watch(
  () => props.configinfo.roomid,
  (newValue, oldValue) => {
    init();
  }
);
</script>

二、父组件调用子组件方法（vue3语法糖）

父组件

<template>
  <div>
    <p class="child">父组件</p>
    <TimeTable  ref="selectroomclick" />//ref是要触发子组件方法
    <button @click="valueClick">传值</button>
  </div>
</template>

<script setup>
import TimeTable from "@/components/Dialog/TimeTable.vue";
import { ref } from "vue";
const selectroomclick = ref(null);
function valueClick(){
    //调子组件方法 ustsr_click_select为调取的方法名
     selectroomclick.value.ustsr_click_select();
}
</script>

子组件

<template>
  <div>
    <button>我是子组件按钮</button>
  </div>
</template>
 
<script setup lang="ts">
//会被父组件调用
const ustsr_click_select = () => {
  console.log("@子组件----我被调用了");
};
defineExpose({
  ustsr_click_select,
});
</script>
 
<style scoped></style>