13 . watch 函数
-
watch函数，是用来定义侦听器的
- 监听ref定义的响应式数据
- 监听多个响应式数据数据
- 监听reactive定义的响应式数据
- 监听reactive定义的响应式数据，某一个属性
- 深度监听
-
话不多说,直接上代码
下面是基本的语法 // 当你需要监听数据的变化就可以使用watch // 1. 监听一个ref数据 // 1.1 第一个参数 需要监听的目标 // 1.2 第二个参数 改变后触发的函数 // watch(count, (newVal,oldVal)=>{ // console.log(newVal,oldVal) // },{ // deep : true, // immediate:true // }) // 四种写法： obj [obj,n] ()=>obj ()=>obj.age // 如果监听对象包在数组中，那就可以触发 // 获取的是新值
14. 补充 v-model 语法糖
1. 在vue2.0中v-mode语法糖简写的代码 `<Son :value="msg" @input="msg=$event" />`
1. 在vue3.0中v-model语法糖有所调整：`<Son :modelValue="msg" @update:modelValue="msg=$event" />`
1. <!-- 子组件中设置 v-model -->
<Son v-model="count" />
2. //定义 count 的值
setup () {
const count = ref(10)
return { count }
}
3. //子组件接收 modelValue(固定语句)
props: {
modelValue: {
type: Number,
default: 0
}
}
4. //子组件如果想改变父组件的值的话
setup (props, {emit}) {
const fn = () => {
// 改变数据
emit('update:modelValue', 这是传入改变)
}
return { fn }
15 . 补充-mixins语法(这是vue2的语法)
- 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项
2. 下面直接讲解
1. //我们先要选择我们需要导入的文件
例: import mixin from './mixins'
2. 跟 setup(){}同级地方
mixins:[mixin]
3. 然后我们用导入文件里面的变量跟函数
今天就把昨天的知识作为补充 , 所有内容不是很多
