vue3.0
**提供兩種setup的入口方式，現在的話沒有this**
1.
export default{
setup(){}
}
2.<script setup>
// 建議使用第二種，因為定義更簡便
// 資料定義和方法使用 兩種格式
---------------------------------分割----------------------------------------
<template>
<div class='content'>
<div v-for="item in testData" :key="item.id">
{{ item.name }}
</div>
<span>{{count}}</span>
<button @click="modifyData">按鈕</button>
</div>
</<template>
<script>
// 這裡還有好多定義資料的方法，自己去官方文件吧
import {reactive, ref} from "vue";
export default {
setup(){
let count = ref(0);
let testData= reactive([
{
id:1,
name:'張飛'
},
{
id:2,
name:'關羽'
}
])
function modifyData() {
testData[0].name ='趙雲'
}
return {
testData,
count,
modifyData
}
}
}
---------------------------------分割--------------------------------------------
2. <script setup> 這種格式的
<template>
<div>
<div @click="log">{{ msg }}</div>
<div v-for="(item,index) in setUpTestData" :key="index">{{ item }}</div>
</div>
</template>
// 不用寫 export default ,也不需return
**<script setup>**
import {reactive} from "vue";
const msg = 'Hello!'
// 函式
function log() {
console.log(msg)
}
const setUpTestData = reactive([1, 2, 3, 5])
</script>
---------------------------------分割--------------------------------------------
// 下一話題
// 父子元件傳值和ref 拿到子元件例項
//父元件還是像以前一樣,:value='12' 這樣，主要是子元件怎麼接收和子元件怎麼返回引數
//父元件
<Test :value="count" @sendValue="sendValue"/>
//子元件 ，如果是 第一種情況
<template>
<div>
<span> 測試元件</span>
<button @click="send">傳送</button>
</div>
</template>
<script>
import {ref} from "vue"
export default {
name: "test",
props: {
value: {
type: Number
}
},
// 在setup 中提供倆個引數
setup(props, {emit}) {
let propsValue = ref(props.value)
function send() {
// 按鈕點擊發送這個方法， 並將對應的值傳遞出去
emit('sendValue', 5);
}
return {
send,
propsValue,
}
}
}
------------------------第二種--------------------------------------
// 可以不使用components
// 可以使用is來動態渲染元件 使用 defineProps 來接受值
// 使用defineEmits 將給你物件，用這個物件，傳送值和方法

<template>
<div>
// 動態載入元件
<component :is="dataFlag? test : HelloWorld"></component>
<button @click="setUpClick">setUp傳送</button>
</div>
</template>
<script setup>
// 變數
import {reactive, defineProps, defineEmits} from "vue";

const msg = 'Hello!'

import test from "./test"; // 這樣就代表註冊了

import HelloWorld from "./HelloWorld";

let dataFlag = true;

// 接受的值
const props = defineProps({
value: Number
})
const emit = defineEmits();
// 傳送值
function setUpClick() {
emit('ok','sunsan');
}
</script>
---------------------------------分割--------------------------------------------
// 關於ref,我們都是希望拿到子元件例項，或者子元件資料。 以前的寫法2.x
<test ref='test'> this.$refs.test //3.0沒有this 所以這種方式已經不對了
//看下面程式碼如何獲取
<Test ref="testRef"/>
<button @click="getRef">拿到ref</button>
// 然後你需要在setup中
setup(){
let testRef = ref(null);
function getRef(){
console.log(testRef.value.data); // 拿到子元件內部的值
testRef.value.motify(); // 觸發子元件內部方法
}
}
---------------------------------分割--------------------------------------------
// setup第二種
// 因為這種情況不會使用return {} 的方式返回資料所以
//為了在 <script setup> 元件中明確要暴露出去的屬性，使用 defineExpose 編譯器巨集：
//父元件我的測試，必須在監聽方法裡面獲取ref不然獲取不到，如果有其他方式留言
<setup ref="mewRef" />
<button @click="getRef">拿到ref</button>
// vue3 掛在ref的方式
function getRef(){
console.log(mewRef.value.data)
mewRef.value.setUpFn();
}
//子元件
<script setup>
import { defineExpose} from "vue";
let data = ref(5691);
function setUpFn() {
console.log('方法觸發了');
}
defineExpose({
data,
setUpFn
})
</script>
---------------------------------分割--------------------------------------------
// 以後更新吧~~~~
---------------------------------分割--------------------------------------------
</script>

原文：https://blog.csdn.net/weixin_45932463/article/details/120506439?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-1.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-1.no_search_link