vue2转战vue3的简单步骤第二部分

第一部分

https://blog.youkuaiyun.com/springdk2009/article/details/137051519

2.4 生命周期

选项式API(vue2)	组合式API(vue3)
beforeCreate/created	setup
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted

2.4.1 父组件传值给子组件

回忆vue2

// 子组件部分
<template>
  <div class="chinld">
    <h3>子组件</h3>
    <div>
      姓名：{{ name }}<br>
      年龄：{{ age }}
    </div>
  </div>
</template>

<script>
export default {
  name: "Chinld",
  props: {
    name: {
      type: String,
      default: ""
    },
    age: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style scoped>
.chinld {
  min-width: 200px;
  background: bisque;
}
</style>
// 父组件部分
<template>
  <div>
    <h2>父组件</h2>
    <Chinld :name="chinldData.name" :age="chinldData.age"></Chinld>
  </div>
</template>
<script>
import Chinld from "@/components/Chinld.vue";

export default {
  name: '3-4-1',
  components: {
    Chinld
  },
  data() {
    return {
      chinldData: {
        name: '张三三',
        age: 29,
      }
    }
  }
}
</script>
<style scoped>

</style>

vue3写法

// 子组件部分(模板部分没变更)
<template>
  <div class="chinld">
    <h3>子组件</h3>
    <div>
      姓名：{{ name }}<br>
      年龄：{{ age }}
    </div>
  </div>
</template>

<script setup>
// 声明
const props = defineProps({
  name: {
    type: String,
    default: ""
  },
  age: {
    type: Number,
    default: 0
  }
})
</script>

<style scoped>
.chinld {
  min-width: 200px;
  background: bisque;
}
</style>

// 父组件部分
<template>
  <div>
    <h2>父组件</h2>
    <Chinld :name="chinldData.name" :age="chinldData.age"></Chinld>
  </div>
</template>

<script setup>
import Chinld from "@/components/Chinld.vue";
import {ref} from "vue";

const chinldData = ref({
  name: '张三三',
  age: 29,
})
// 子组件自动更新
setInterval(() => {
  chinldData.value.age += 1
}, 2000)
</script>

<style scoped>

</style>

2.4.2 子组件传值给父组件

回忆vue2

// 子组件
<template>
  <div className="chinld">
    <h3>子组件</h3>
    <div>
      姓名：{{ name }}<br>
      年龄：{{ age }}
    </div>
    <input type="button" name="aa" @click="changeName" value="改名称">
  </div>
</template>

<script>
export default {
  name: "Chinld",
  props: {
    name: {
      type: String,
      default: ""
    },
    age: {
      type: Number,
      default: 0
    }
  },
  methods: {
    changeName() {
      this.$emit('funChange', '李四四')
    }
  }
}
</script>

<style scoped>
.chinld {
  min-width: 200px;
  background: bisque;
}
</style>
// 父组件
<template>
  <div>
    <h2>父组件</h2>
    姓名：{{ chinldData.name }}<br>
    年龄：{{ chinldData.age }}
    <br><br>
    <hr>
    <br>
    <Chinld :name="chinldData.name" :age="chinldData.age" @funChange="changeName"></Chinld>
  </div>
</template>
<script>
import Chinld from "@/components/Chinld.vue";

export default {
  name: '3-4-1',
  components: {
    Chinld
  },
  data() {
    return {
      chinldData: {
        name: '张三三',
        age: 29,
      }
    }
  },
  methods: {
    changeName(name) {
      this.chinldData.name = name;
    }
  }
}
</script>
<style scoped>

</style>

说明图：

vue3写法

// 子组件
<template>
  <div className="chinld">
    <h3>子组件</h3>
    <div>
      姓名：{{ name }}<br>
      年龄：{{ age }}
    </div>
    <input type="button" name="aa" @click="changeName" value="改名称">
  </div>
</template>

<script setup>
const props = defineProps({
  name: {
    type: String,
    default: ""
  },
  age: {
    type: Number,
    default: 0
  }
})
const emit = defineEmits(['funChange'])
const changeName = () => {
  emit('funChange', '子组件修改后的名称')
}
</script>

<style scoped>
.chinld {
  min-width: 200px;
  background: bisque;
}
</style>
// 父组件
<template>
  <div>
    <h2>父组件</h2>
    姓名：{{ chinldData.name }}<br>
    年龄：{{ chinldData.age }}
    <br><br>
    <hr>
    <br>
    <Chinld :name="chinldData.name" :age="chinldData.age" @funChange="changeName"></Chinld>
  </div>
</template>
<script setup>
import Chinld from "@/components/Chinld.vue";
import {ref} from "vue";

const chinldData = ref({
  name: '张三三',
  age: 29,
})
const changeName = (name) => {
  chinldData.value.name = name;
}
</script>
<style scoped>

</style>

2.4.3 模板引用ref

vue3主要代码
子组件声明公开的属性
defineExpose({
childFuction,
props,
})
父组件定义模板ref

// 子组件
< template>
    < div
        className="chinld">
        < h3>子组件< /h3>
        <div>
            姓名：{{name}}
            <br>
                年龄：{{age}}
        </div>
        <input type="button" name="aa"
        @click="changeName" value="改名称">
    </div>
</template>

<script setup>
    const props = defineProps({
    name: {
    type: String,
    default: ""
},
    age: {
    type: Number,
    default: 0
}
})
    const emit = defineEmits(['funChange'])
    const changeName = () => {
    emit('funChange', '李四四')
}

    /**
    * 声明一个事件
    * @param obj
    */
    const childFuction = (obj) => {
    console.log('子组件事件', obj)
}
    defineExpose({
    childFuction,
    props,
})
</script>

<style scoped>
    .chinld {
    min - width: 200px;
    background: bisque;
}
</style>

// 父组件
<template>
    <div>
        <h2>父组件</h2>
        姓名：{{chinldData.name}}
        <br>
            年龄：{{chinldData.age}}
            <br>
                <br>
                    <hr>
                        <br>
                            <Chinld ref="chinldRef"
                            :name="chinldData.name" :age="chinldData.age" @funChange="changeName">
                        </Chinld>
    </div>
</template>
<script setup>
    import Chinld from "@/components/Chinld.vue";
    import {computed, ref} from "vue";

    const chinldRef = ref(null);

    const chinldData = ref({
    name: '张三三',
    age: 29,
})


    const changeName = (name) => {
    chinldData.value.name = name;
    // 能过模板ref调用子组件
    console.log('父组件', chinldRef.value.props)
    chinldRef.value.childFuction({a: 'dd', b: 'dd'})
}
</script>

2.4.4 跨组件通信 provide与inject

注意只能向子传递

// 声明
provide("testName", '张三三')
// 获取并赋值
const testName = inject('testName');