vue使用----------父子组件的使用

Posted 逝意遨游

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue使用----------父子组件的使用相关的知识,希望对你有一定的参考价值。

父组件和子组件的区分

使用组件者为父,被使用组件者为子

父需要声明子组件,引入子组件对象,声明方式如下

import 子组件对象 form ‘./xxx.vue‘;

{
   components:{
       组件名:子组件对象
   }
}

全局组件,使用更为方便,不需要声明,直接使用
在main.js中引入一次 声明全局组件:‘vue.component(‘组件名‘,组件对象);‘

 

父子组件之间的传信

------父传子
父组件通过子组件的属性将值进行传递
---方式有2种:
+常量:prop1="常量值"
+变量::prop2="变量名"
子组件需要声明
-根属性props:[‘prop1‘,‘prop2‘]
-在页面中直接使用{{prop1}}
-在js中应该如何使用prop1? this.prop1获取

------子传父 $on $emit
父组件通过 new Vue()这样的一个对象,来$on(‘事件名‘,fn(prop1,prop2))
子组件引入同一个vuebus,来$emit(‘事件名‘,prop1,prop2)

以上是关于vue使用----------父子组件的使用的主要内容,如果未能解决你的问题,请参考以下文章

vue使用----------父子组件的使用

Vue3---父子组件间互相传值

Vue_(组件通讯)简单使用父子组件

vue父子组件数据传输以及实现父子组件数据双向绑定

「 VUE3 + TS + Vite 」父子组件间如何通信?

vue父子组件传值方式