学院网站建设报价,利用ps制作网站的设计,青岛进出口公司名单,旅游网站建设方案两百字1.父向子传值 父组件
引入子组件
import Son from ./components/Son.vue
设置响应式数据
const num ref(99)
绑定到子组件 Son :numnum/Son
子组件
引入defineProps
import { defineProps } from vue;
生成实例接收数据
type设置接收类…1.父向子传值 父组件
引入子组件
import Son from ./components/Son.vue
设置响应式数据
const num ref(99)
绑定到子组件 Son :numnum/Son
子组件
引入defineProps
import { defineProps } from vue;
生成实例接收数据
type设置接收类型可以是数组形式接收多种类型
default设置默认值
const prop defineProps({num: {type: Number,default: 18}
})
--------------------------------------------------------------------------------------------------------------------------
2.子向父传值 子组件
引入defineEmits
import { defineEmits } from vue; 生成实例函数内参数可以不写参数为要抛出的事件名
const emit defineEmits([doMessage])设置点击按钮 button clickdoClickSan组件按钮/button
定义事件函数-使用实例emit抛出事件和值
const doClick () {emit(doMessage, 我是son里的数据)
} 父组件
子组件标签接收抛出事件 Son doMessagedoMessage/Son
定义执行函数--函数的形参接收子组件抛出的值
const doMessage (e) {console.log(e);
}
--------------------------------------------------------------------------------------------------------------------------
3.后代组件传值 祖先组件
app.vue组件引入
import { ref, provide } from vue;
设置响应数据和注入数据
const num ref(999)
provide(appNum, num)
后代组件
后代组件引入
import { inject } from vue;
使用变量接收
const appNum inject(appNum)
One.vue和Two.vue就可以接收祖先组件里的数据 -------------------------------------------------------------------------------------------------------------------------- 祖先组件
app.vue组件引入
import { provide } from vue;
定义函数
const appFn (e) {console.log(appFn祖先, e);
}
并向后代组件传递函数
provide(appFn, appFn)
后代组件
引入函数
import { inject } from vue;
接收组件传递的函数
const appFn inject(appFn)
设置按钮注册点击事件执行函数使用祖先传递的函数 button clickappFn/button
函数被执行 点击时执行函数传递参数 button clickappFn(Two组件触发的祖先函数)按钮/button
祖先组件成功接收参数
