vue3+Ts 之父子组件传值及部分函数基础使用·

vue3 基础

1. vue3，父组件向子组件传值(props)

父组件

<template>
  <h1>
    父传子
  </h1>
  //应用组件
  <ChildComp
      name="父组件传递的值"
      msg="父组件信息---》我传过来了"
  />
</template>

<script lang="ts">
import {defineComponent} from 'vue'
//1.导入组件
import ChildComp from "./Child.vue";

export default defineComponent({
//2.使用组件
  components: {ChildComp},
  setup(props) {
    return {}
  }
})
</script>

子组件

<template>
<span>参数传递 父----》子</span>
  <h1>{{name}}</h1>
  <h1>{{msg}}</h1>
</template>

<script lang="ts">
import {defineComponent,ref} from 'vue'
const name:any=ref("子组件name");
const msg:any=ref("子组件msg");
export default defineComponent({
//1.给子组件命名
  name:"ChildComp",
  //2.父组件传入值
  props: {
    name: String,
    msg: {type: String, required: true}
  },
  setup(props,context){
  //3.拿到值 或者 不写但是return不写
    setTimeout(function () {
    	name.value=props.name;
   		msg.value=props.msg;
    },3000)
    return{
      name,
      msg,
    }
  }

})
</script>

显示
3s前

3s后

2. 创建响应式链接动态修改值（toRef）

<template>
  <h1>
   创建连接
  </h1>
  {{data}}
{{foo}}
  <button @click="change">
    按钮
  </button>
</template>

<script lang="ts">
import {defineComponent,reactive,toRef} from 'vue'
import ChildComp from "./Child.vue";
const data = reactive({
  name:"xiaoli",
  sex:"男"
});
const foo = toRef(data,'sex');
export default defineComponent({
  components: {ChildComp},
  setup(props) {
    function change(){
      //data.sex.value="女--->";//错误
      foo.value="女";
      console.log(foo);
    }
    return {
      data,
      foo,
      change,
    }
  }
})
</script>

3. 跨层级组件间通信（provide,inject）

代码实现如下
传递参数的组件

<template>
 <h1>
 跨层级组件通信
</h1>
//接收参数的组件
<Comp/>
</template>
<script setup>
import { ref,provide } from 'vue'
import Comp from './Comp.vue'
const color = ref('red');
provide("color",color)
</script>

接收参数的组件

<template>
  <h1>
    父组件传值来了{{color}}
  </h1>
</template>

<script setup>
import { ref,inject } from 'vue'
const color = inject("color");

</script>

显示效果