setup语法糖使用，ref和reactive，组件传值

vue3的setup组合式api，

• setup把data定义数据、methods定义方法组合到一起写，降低代码耦合
• setup()执行在beforeCreate之前，setup没有this指向，this是undefined，所有东西通过函数获取
• ref用于定义响应式数据，不限类型，使用ref定义的数据要.value
• reactive用于转换对象为响应式数据，不支持简单数据类型，在确定数据是对象且字段也确定就用reactive
  创建a.vue文件

<template>
    <div>
        {{msg}}
    </div>
</template>
<script>
import { ref } from 'vue'
export default {//默认导出
    setup(){
	  //定义数据
        const msg = ref('cxk')
        return { msg }
    }
}
</script>

在App.vue中挂载

<template>
    <div>
        <A></A>
    </div>
</template>
<script>
import a from './views/a/a.vue'//默认引入
export default {
    components:{
        A:a
    }
}
</script>

• 简写setup，在script标签中加上setup
  默认导出省略不写，setup()和return省略不写

<script setup>
import { ref } from 'vue'
const msg = ref('cxk')
</script>

引入时，省略components直接使用

<template>
  <div>
    <h1>我是 app 根组件</h1>
    <div class="childn">
      <p>我是子组件内容</p>
      <A></A>
      <B></B>
    </div>
  </div>
</template>
<script setup>
import A from "./views/a/a.vue";
import B from "./views/b/b.vue";
</script>

通过ref获取节点

const inputDom = ref(null)

在标签中

<input type="text" ref="inputDom">

使用时inputDom.value就是节点

通过ref父组件获取子组件数据,defineExpose的使用

子组件中

    //把给父组件用的数据方法暴露出去
    defineExpose({msg,handlerClick})

在父组件中

<template>
  <div>
    <Form ref="forms"></Form>//把定义的响应式数据绑到子组件标签上
    <button  @click="getForms">点我打印获取的数据</button>
  </div>
</template>

import Form from './form子组件.vue'//引入子组件

const forms = ref(null)//定义一个响应式数据
const getForms = ()=>{//定义一个方法点击打印子组件传过来的数据
  console.log(forms);
  forms.value.handlerClick()//执行子组件传过来的函数
}

父向子传值，defineProps的使用

父组件中引入子组件

import Child from './child.vue'
//定义数据
const car = "玛莎拉蒂"
const money = 2000
const arr = [1,2,3,4]
const msg= {
  sname:'cxk',
  age:18
}

在父组件模板中的子组件标签绑定数据

<Child :car="car" :money="money" :arr="arr" :msg="msg">

在子组件中

<template>
  <div>
    <!-- 使用父组件的数据 -->
    {{ props }}
    <p>{{ props.car }}---{{ props.money }}---{{ props.arr }}---{{ props.msg }}</p>
  </div>
</template>

const props = defineProps({//把获取的数据赋值给props
    car:{type:String},
    money:{type:Number},
    arr:{type:Array},
    msg:{type:String}
})

子向父传值，defineEmits([‘方法名’])的使用

在子组件中

<template>
  <div>
   //绑定事件传递数据
    <button @click="sendData"></button>
  </div>
</template>


<script setup>
 //定义要传递的方法名
  const emit = defineEmits(['changeMyData'])
  const sendData = ()=>{
    emit('changeMyData','子组件传递过去的数据')
  }
</script>

在父组件中

<template>
  <div>
    <!-- @changeMyData子组件传过来的方法名，getData要触发的事件，传过来的数据就在这个事件的参数中 -->
    <Child @changeMyData="getData"></Child>
  </div>
</template>

<script setup>
import Child from './child.vue'//引入子组件
//通过事件，打印接收到的数据
const getData = (data) =>{
  console.log(data);
}
</script>

无关组件传值，provide()和inject的使用

在某个组件中

provide('传递数据的名字',要传递的数据值)

在其他组件组件中

import { inject } from 'vue'//引入inject方法
const msg = inject('传递数据的名字')//获取对应名字的数据