dede小游戏php网站源码,知晓程序 小程序商店,小说抄写员兼职app,优化大师官网下载安装目录 父子组件之间的相互通信父组件传递数据给子组件Prop为字符串类型的数组Prop为对象类型 子组件传递数据给父组件 父子组件之间的相互通信
开发过程中#xff0c;我们通常会将一个页面拆分成多个组件#xff0c;然后将这些组件通过组合或者嵌套的方式构建页面。组件的嵌套… 目录 父子组件之间的相互通信父组件传递数据给子组件Prop为字符串类型的数组Prop为对象类型 子组件传递数据给父组件 父子组件之间的相互通信
开发过程中我们通常会将一个页面拆分成多个组件然后将这些组件通过组合或者嵌套的方式构建页面。组件的嵌套由父组件和子组件组成它们之间的通信如下图所示 父组件传递数据给子组件是通过props属性实现的而子组件传递数据给父组件是通过触发事件$emit实现的
父组件传递数据给子组件
Prop为字符串类型的数组
Props是在组件上注册自定义属性的一种方式。当父组件为自定义属性赋值后子组件可以通过属性名获取对应的值。Props一般可用来传递字符串类型的数组或者对象类型
!--ShowMessage.vue--
script
export default {props: [title, content]
}
/scripttemplatediv classshow-messageh4{{title}}/h4div{{content}}/div/div
/templatestyle scoped/style!--App.vue--
templatediv classapp
!-- 1. 直接传递字符串--ShowMessage title我是标题 content我是内容/ShowMessage
!-- 2. 绑定字符串类型的变量--ShowMessage :titletitle :contentcontent/ShowMessage
!-- 3. 绑定对象中字符串类型的属性--ShowMessage :titlemessage.title :contentmessage.content/ShowMessage
!-- 4. 直接绑定一个对象会自动将对象的每个属性拆出来逐一绑定--show-message v-bindmessage/show-message/div
/template
script
import ShowMessage from ./ShowMessage.vue;
export default {components: {ShowMessage,},data() {return {title: 我是标题title,content: 我是内容content,message: {title: 我是标题message.title,content: 我是内容message.content}}}
}
/script上面实现了从父组件app传递数据到子组件ShowMessage
Prop为对象类型
!--ShowMessage.vue--
script
export default {// 1. props是数组// props: [title, content]// 2. props是对象props: {title: String, // 定义title属性为String类型 (这里是简写, 下面content属性是完整的写法)content: {type: String, // 定义参数类型为String类型required: true, // 父组件使用该组件时必须传递该参数否则控制台会出现警告default: 我是内容的默认值 // 如果父组件使用该组件时没有传递content参数则使用默认值}}
}
/scripttemplatediv classshow-messageh4{{title}}/h4div{{content}}/div/div
/templatestyle scoped/styleProps支持camelCase驼峰和kebab-case连字符分隔这两种方式在HTML中属性名不分大小写浏览器会将所有大写字符解释为小写字符。因此在模板中使用camelCase命名法的Props时也可以使用其等效的kebab-case语法。例如我们为ShowMessage.vue子组件添加一个messageInfo属性。该属性支持camelCase和kebab-case两种方式如下这两种方式是等价的
ShowMessage message-info我是message-info字符串 content
/ShowMessage
show-message messageInfo我是messageInfo字符串 content
/show-message我们只需要在ShowMessage.vue文件中把props改成下面这样即可
script
export default {// 1. props是数组// props: [title, content]// 2. props是对象props: {title: String, // 定义title属性为String类型 (这里是简写, 下面content属性是完整的写法)content: {type: String, // 定义参数类型为String类型required: true, // 父组件使用该组件时必须传递该参数否则控制台会出现警告default: 我是内容的默认值 // 如果父组件使用该组件时没有传递content参数则使用默认值},messageInfo: {type: String,}}
}
/script这样就能在组件ShowMessage中接收到父组件传进来的messageInfo属性了除了Props属性我们还经常会为组件传递id,class等属性这些属性被称为非Props的属性。当我们为一个组件传递某个属性但是该属性并没有定义对应的props或emits时就称之为非Props的属性常见的有class,style,id等。当组件只有单个根节点时这些非Props的Attribute将被自动添加到根节点的属性中这被称为属性继承。如下所示虽然在NoPropAttribute组件中并没有定义Props但是id,class,name这三个属性还是被自动添加到了根节点的属性中
!--NoPropAttribute.vue--
script setup/scripttemplatediv classno-prop-attribute该子组件没有定义任何的props属性/div
/templatestyle scoped/style!--App.vue--
script setupimport NoPropAttribute from /chapters/chapter05/NoPropAttribute.vue;
/scripttemplatediv classappno-prop-attribute idcoder classwhy namecoderwhy/no-prop-attribute/div
/templatestyle scoped/style那么我们有时候有这样的场景我们不希望组件的根元素继承属性。那么该如何禁用非Props的属性继承呢在组件中设置inheritAttr: false即可。可以通过$attrs访问所有的非Props的属性并应用于根元素之外的其他元素。如下所示
!--NoPropAttribute.vue--
script
export default {inheritAttrs: false,
}
/scripttemplatediv classno-prop-attribute该子组件没有定义任何的props属性/div
/templatestyle scoped/style如果想获取非Props的属性需要使用$attr获取如下
!--NoPropAttribute.vue--
script
export default {inheritAttrs: false,
}
/scripttemplatediv classno-prop-attribute :id$attrs.id该子组件没有定义任何的props属性/div
/templatestyle scoped/style子组件传递数据给父组件
子组件传递数据给父组件的需求也是非常普遍的例如子组件发生点击事件需要传递一些索引等信息给父组件父组件再进行刷新数据等操作 下面是一个例子
!--App.vue--
script
import CounterOperation from /chapters/chapter06/CounterOperation.vue;
export default {components: {CounterOperation},data() {return {counter: 0}},methods: {addOne() {this.counter},subOne() {this.counter--}}
}
/scripttemplatedivh4当前计数: {{counter}}/h4counter-operation addaddOne subsubOne/counter-operation/div
/templatestyle scoped/style!--CounterOperation.vue--
script
export default {emits: [add, sub],methods: {increment() {this.$emit(add)},decrement() {this.$emit(sub)}}
}
/scripttemplatedivbutton clickincrement1/buttonbutton clickdecrement-1/button/div
/templatestyle scoped/style在子组件中定义触发事件的名称emits: [add, sub]父组件中以v-on的形式传入要监听的事件名称并绑定到对应的方法中例如addaddOne然后子组件中发生事件的时候根据事件名称使用$emit函数触发对应的事件例如this.$emit(add)
