vue3.0 数据定义，父子组件传值，setup的写法，ref等

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>