Vue3 Composition API

在script标签中添加setup，可以使代码大量减少。

1.动态绑定数据：script-setup不需要return

script-setup

<template>
  <h1>
    My name is {{ name }},I'm {{ age }} years old
  </h1>
</template>

<script setup>
import { ref } from "@vue/reactivity";

const name = ref("Wj");
const age = ref(27);
</script>

 没使用 script-setup

<template>
  <h1>
    My name is {{ name }},I'm {{ age }} years old
  </h1>
</template>

<script>
import { ref } from "@vue/reactivity";

export default {
  setup() {
    const name = ref("Wj");
    const age = ref(27);

    return { name, age };
  },
};
</script>

 

2.Methods方法：script-setup不需要return

script-setup

<template>
  <h1 @click="handleHeadingClick">
    My name is {{ name }},I'm {{ age }} years old
  </h1>
</template>

<script setup>
import { ref } from "@vue/reactivity";

const name = ref("Wj");
const age = ref(27);

const handleHeadingClick = () => {
  name.value = "Wj2";
  age.value = 29;
};
</script>

 没使用 script-setup

<template>
  <h1 @click="handleHeadingClick">
    My name is {{ name }},I'm {{ age }} years old
  </h1>
</template>

<script>
import { ref } from "@vue/reactivity";

export default {
  setup() {
    const name = ref("Wj");
    const age = ref(27);

    const handleHeadingClick = () => {
      name.value = "Wj2";
      age.value = 29;
    };

    return { name, age, handleHeadingClick };
  },
};
</script>

 

3.components组件：script-setup不需要写components

script-setup

<template>
  <MyButton />
</template>

<script setup>
import MyButton from "./components/MyButton.vue";
</script>

 没使用 script-setup

<template>
  <MyButton />
</template>

<script>
import MyButton from "./components/MyButton.vue";

export default {
  components: { MyButton },
};
</script>

4.props父传子

//父组件内-把文本内容'ButtonText'传递给子组件
<template>
  <MyButton text='ButtonText' />
</template>

<script setup>
import MyButton from "./components/MyButton.vue";
</script>

script-setup

//子组件内
<template>
  <button>{{ text }}</button>
  <!--
  <button>{{ props.text }}</button>
  在template里面以上2种写法都可以拿到父组件传过来的text值
  -->
</template>

<script setup>
const props = defineProps({
  text: {
    type: String,
    default: "No text",
  },
});
  
  <!--
    在script里面只有props.text可以拿到父组件传过来的text值；
    直接写console.log(text)会报错。
  -->
console.log(props.text);
</script>

没使用 script-setup

<template>
  <button>{{ text }}</button>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: "No text",
    },
  },
};
</script>

5.emit子传父

script-setup

//子组件内
<template>
  <button @click="$emit('emited', childVal)">Click this button</button>
</template>

<script setup>
<!-- 
childVal内装有需要传递的值
-->
const childVal= "childValue";
const emit = defineEmits(["emited"]);
</script>

//父组件内
<template>
  <MyButton @emited="showAlert" />
</template>

<script setup>
import MyButton from "./components/MyButton.vue";

const showAlert = (childVal) => {
  alert(childVal);
};
</script>

//写在methods里面
//子组件内
<template>
  <button @click="buttonClicked">Click this button</button>
</template>

<script setup>
const childVal = "childValue";
const emit = defineEmits(["emited"]);

<!--
写在方法里面
-->
const buttonClicked = () => {
  emit("emited", childVal);
};
</script>

例子： 将子组件内的age值传递给父组件

//子组件内
<template>
  <button @click="buttonClicked">Change Age</button>
</template>

<script setup>
const childAge = 33;
const emit = defineEmits(["emited"]);
const buttonClicked = () => {
  emit("emited", childAge);
};
</script>

//父组件内
<template>
  <h1>
    My name is Wj, I'm {{ age }} years old
  </h1>
  <MyButton @emited="showAlert" />
</template>

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

const age = ref(27);

const showAlert = (childAge) => {
  age.value = childAge;
};
</script>

 

没使用 script-setup

//子组件内
<template>
  <button @click="$emit('emited', childVal)">Click this button</button>
</template>

<script>
export default {
  emits: ["emited"],
  setup() {
    const childVal = "childValue";

    return { childVal };
  },
};
</script>

//父组件内
<template>
  <MyButton @emited="showAlert" />
</template>

<script>
import MyButton from "./components/MyButton.vue";

export default {
  setup() {
    const showAlert = (childVal) => {
      alert(childVal);
    };

    return { showAlert };
  },
  components: { MyButton },
};
</script>