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('传递数据的名字')//获取对应名字的数据