当前位置: 首页 > Web前端 > vue.js

我是如何学习vue的17:父子组件的通信

时间:2023-03-31 18:10:06 vue.js

父组件向子组件传递数据:props(通过属性名父传子)常用于请求列表数据:显示ul->li列表时,父组件向服务器请求数据,将数据存储在父组件中,并将数据传递给子组件,然后子组件使用v-for遍历并显示。(因为子组件不能直接访问父组件或vue实例的数据)传递方法父组件数据定义子组件HTML标签中的数据,使用v-bind自定义属性,赋值父组件数据到属性注册组件,添加props属性指定传入数据的类型、默认值、是否必填。注意:1.type支持的类型有:String,Number,Boolean,Array,Object,Date,Function,Symbol2.默认值:默认值必须是函数3.子组件中props有多种定义方式:要么使用数组,也可以使用objectprops写法一:传递数组props:['cmovies','cmessages']//cmovies,cmessages是变量名props写法二:传递对象传递对象的好处:可以指定typesforvariables,provideDefaultvalueprops:{cmovies:{type:Array,//default:"aaaaa",//类型为对象或数组时,默认值必须为函数。2.5.17以下的低版本可以写成default:[]default(){return[]},required:true}}来使用子组件模板中的数据。如果属性没有通过v-bind绑定,则绑定到字符串,而不是变量;vue不会去父组件中寻找对应的变量来赋值属性。当我们有自定义构造函数时,验证也支持自定义类型。props的驼峰命名如果props中的属性名需要使用驼峰命名,那么component标签绑定的属性名需要以减号的形式命名。props:{cInfo:{type:Object,default(){return{}}}组件在模板中使用组件的地方,也需要驼峰式。

{{cInfo}}

子组件向父组件传递数据:通过自定义事件使用场景:子组件点击,需要告诉父组件子组件发生了什么事件(点击事件),点击了哪一个。父组件根据我点击的不同内容请求不同的数据。步骤子组件发出自定义事件子组件模板绑定点击事件(或其他事件)定义点击事件回调函数:emitevent(自定义事件事件名,参数)父组件监听自定义事件绑定在父组件模板中定义自定义事件定义回调函数,用于接收传入的数据,并根据数据执行相应的动作。Demo
{{item.name}}
/template>注意自定义事件的名称,不能使用驼峰命名!比如这里我们自定义事件的名称,可以写itemclick,也可以写item-click,但是不能写itemClick,否则会报错。如果是在脚手架中,可以使用驼峰命名法。