• Options API vue2 的方式
• Composition API vue3 的方式
• Script Setup vue3 更精简的方式

Options API

<script lang="ts">
import { defineComponent } from "vue";
 
export default defineComponent({
    name: "App",
    data() {
        return { name: "Erik" };
    }
    /*
    data: () => ({
        name: "Erik123"
    })
    */
});
</script>
 
<template>
    <h3>Hello World</h3>
    <h5>{{ name }}</h5>
</template>
 
<style>
#app {
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>

				

					
				
				

					
				
				

					
				
				

					
				
			

Composition API

<script lang="ts">
import { defineComponent } from "vue";
 
export default defineComponent({
    name: "App",
    setup() {
        let name = "erik";
        return { name };
    }
});
</script>
 
<template>
    <h3>Hello World</h3>
    <h5>{{ name }}</h5>
</template>
 
<style>
#app {
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>

				

					
				
				

					
				
				

					
				
				

					
				
			

Script Setup

<script lang="ts" setup>
let name = "bob123";
</script>
 
<template>
    <h3>Hello World</h3>
    <h5>{{ name }}</h5>
</template>
 
<style>
#app {
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>

				

					
				
				

					
				
				

					
				
				

					
				
			

引用一个组件

<script lang="ts" setup>
import HelloWorld from "./components/HellowWorld.vue";
let name = "bob123";
</script>
 
<template>
    <h3>Hello World</h3>
    <h5>{{ name }}</h5>
    <HelloWorld />
</template>
 
<style>
#app {
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>

				

					
				
				

					
				
				

					
				
				

					
				
			

HelloWorld.vue

<template>
    <h3>Hello From Component</h3>
    <h5>Received name: {{ props.name }}</h5>
</template>
 
<script lange="ts" setup>
const props = defineProps({ name: String });
</script>

				

					
				
				

					
				
				

					
				
				

					
				
			

传递属性到子组件

<script lang="ts" setup>
import HelloWorld from "./components/HellowWorld.vue";
let name = "Erik";
</script>
 
<template>
    <HelloWorld :name="name" />
</template>
 
<style>
#app {
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>

				

					
				
				

					
				
				

					
				
				

					
				
			

HelloWorld.vue 默认属性值

<template>
    <h3>Hello From Component</h3>
    <h5>Received name: {{ props.name }}</h5>
</template>
 
<script lange="ts" setup>
const props = withDefaults(defineProps<{ name?: string }>(), {
    name: "Stewart"
});
</script>

				

					
				
				

					
				
				

					
				
				

					
				
			

HelloWorld.vue 默认属性值, 定义接口的方式

<template>
    <h3>Hello From Component</h3>
    <h5>Received name: {{ props.name }}</h5>
</template>
 
<script lange="ts" setup>
interface props {
    name?: string;
}
const props = withDefaults(defineProps<props>(), {
    name: "Stewart"
});
</script>

				

					
				
				

					
				
				

					
				
				

					
				
			

响应子组件事件

<script lang="ts" setup>
import HelloWorld from "./components/HellowWorld.vue";
let name = "bob123";
 
function pressed() {
    alert("Hello From Pressed Function");
}
</script>
 
<template>
    <HelloWorld :name="name" @pressed="pressed" />
</template>
 
<style>
#app {
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>

				

					
				
				

					
				
				

					
				
				

					
				
			

HelloWorld.vue 添加触发事件

<template>
    <h3>Hello From Component</h3>
    <h5>Received name: {{ props.name }}</h5>
    <button @click="getAlert">Press Me</button>
</template>
 
<script lange="ts" setup>
 
const emits = defineEmits(["pressed"]);
 
function getAlert() {
    emits("pressed");
}
 
interface props {
    name?: string;
}
const props = withDefaults(defineProps<props>(), {
    name: "Stewart"
});
</script>

				

					
				
				

					
				
				

					
				
				

					
				
			

响应子组件事件传递的参数

<script lang="ts" setup>
import HelloWorld from "./components/HellowWorld.vue";
let name = "bob123";
 
function pressed(info: string) {
    alert("Hello From Pressed Function " + info);
}
</script>
 
<template>
    <HelloWorld :name="name" @pressed="pressed" />
</template>
 
<style>
#app {
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>

				

					
				
				

					
				
				

					
				
				

					
				
			

HelloWorld.vue 添加触发事件, 并传递参数

<template>
    <h3>Hello From Component</h3>
    <h5>Received name: {{ props.name }}</h5>
    <button @click="getAlert">Press Me</button>
</template>
 
<script lange="ts" setup>
 
const emits = defineEmits(["pressed"]);
 
function getAlert() {
    emits("pressed"， "Whatever Test");
}
 
interface props {
    name?: string;
}
const props = withDefaults(defineProps<props>(), {
    name: "Stewart"
});
</script>

				

					
				
				

					
				
				

					
				
				

					
				
			

添加反应式变量

<script lang="ts" setup>
import HelloWorld from "./components/HellowWorld.vue";
import { ref } from "vue";
 
let name = "bob123";
let pokemon = ref(null) as any;
 
async function pressed() {
    const info = await fetch("https://pokeapi.co/api/v2/pokemon/ditto");
    const json = await info.json();
    pokemon.value = json;
    console.log(pokemon.value);
}
</script>
 
<template>
    <HelloWorld :name="name" @pressed="pressed" />
    <div v-if="pokemon">
        <img :src="pokemon.sprites.back_default" alt="" />
    </div>
</template>
 
<style>
#app {
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>