做网站管理系统,实时视频网站怎么做,做网站需要什么材料,网站推广策略成功的案例目录 一、props (父传子#xff0c;子传父) ------Vue2 ------Vue3 从Vue2(组合式API)和Vue3#xff08;选择式API#xff09;两个版本对每个组件间通信方式进行讲解#xff1a; 一、props (父传子#xff0c;子传父)
------Vue2
父组件#xff1a;
template子传父) ------Vue2 ------Vue3 从Vue2(组合式API)和Vue3选择式API两个版本对每个组件间通信方式进行讲解 一、props (父传子子传父)
------Vue2
父组件
templatedivchild :childValueparentValue :childFuncfatherFunc/child/div
/template
script
import Child from ./Child.vueexport default{components:{Child },data(){
return{parentValue:儿子我是爸爸}
},methods:{fatherFunc(data){console.log(儿子data,爸爸hello儿子)}}
}
/script
子组件
templatedivp{{childValue}}/pbutton clickbaba儿子呼唤道“爸爸!”/button
/div
/template
scriptexport default{props:[childValue,childFunc],//childValue只能读取不能被修改data(){return{papa爸爸}},methods:{baba(){this.childFunc(this.papa)}}
}
/script
页面最终结果展示儿子我是爸爸
控制台显示结果儿子爸爸爸爸hello儿子
props可以传数组也可以传对象详情可以到Vue官网查看入门手册。
------Vue3
父组件
templatedivchild :childValueparentValue :childFuncfatherFunc/child/div
/template
script setup langts
import Child from ./Child.vue
import {ref} from vue
let parentValue ref(爸爸)
let fatherFunc(data){console.log(儿子data,爸爸hello儿子)}
/script
子组件
templatediv
{{props.childValue}}//props可以省略直接写childValue
button clickhandleClick点击/button
/div
/template
script setup langts
let propsdefineProps([childValue,childFunc]) //childValue只能读取不能被修改
let handleClickprops.childFunc(props.childValue);
/script
页面展示的结果爸爸
控制台展示结果儿子爸爸爸爸hello儿子
