滨江网站建设公司,网页首页设计模板图片,wordpress header scroll style,内蒙建设厅官方网站文章目录 前言原理案例效果演示 前言
看到这个标题#xff0c;相信很多人会说我#xff0c;你之前博客写的父级向子级中传递数据使用的是props#xff0c;然后说的子级向父级传递数据则是用的$emit。
并且还说了对于String、数组Array#xff0c;只能是父级使用props传递… 文章目录 前言原理案例效果演示 前言
看到这个标题相信很多人会说我你之前博客写的父级向子级中传递数据使用的是props然后说的子级向父级传递数据则是用的$emit。
并且还说了对于String、数组Array只能是父级使用props传递至子级组件。这不是很矛盾嘛
其实props传递的数据类型除了字符串String、数组Array和对象 Object之外还能传递一个Function 函数类型。
原理
1、父级将自己的某个函数传递至子级中。2、子级获取父级传递来的函数类型并进行调用操作。 相当于是子级组件调用了父级组件中的函数方法触发父级的数据处理与展示。 案例
定义两个模板分别如下所示 父级模板 ComponentPropsParent.vue 父级向子级中传递了一个msg字符串类型的数据 同时也传递了父级中的getDataFromChild 函数但是传递的变量名是 getChildData。 templateh1父级页面/h1p父级获取子级数据{{ info }}/pComponentPropsChild msg父级传子级数据 :getChildDatagetDataFromChild/
/template
script
// 引用子级组件
import ComponentPropsChild from ./ComponentPropsChild.vue;
export default{data(){return{info:}},components:{// 注册子级组件ComponentPropsChild},methods:{getDataFromChild(data){this.info data;}}
}
/script子级模板 ComponentPropsChild.vue 使用props接收父级传来的字符串msg数据和getChildData 作为变量携带的函数。 并调用父级传入的函数。 templateh1子级页面/h1p收到父级传递进子级的数据{{ msg }}/p!-- 不能这么写 --!-- button clicktransDataToFather(6666666)点击一下传递数据到父级/button --!-- getChildData 是一个函数不是变量所以要加() 如果有参数则是(xxx) --p子级调用父级传递进来的函数{{ getChildData(子级调用父级传入函数并返回这句话) }}/p
/template
script
export default{data(){return{}},props:{msg:String,// 父级向子级中传递的是一个父级的函数子级调用函数会触发父级函数逻辑getChildData:Function // 注意 F 大写表示是函数类型对象},// methods:{// transDataToFather(values){// getChildData(values);// }// }
}
/script效果演示
