首页>>后端>>java->vue实例和组件关系?

vue实例和组件关系?

时间:2023-11-29 本站 点击:0

vue 每一条信息代表一个组件

是的。vue中每一个组件都是独一无二的,每一个信息也是独一无二的,所以每一个信息都代表一个组件,可以复制,但是名称是独立的。

首先在vue中,组件是可复用的Vue实例,它拥有独一无二的组件名称,它可以扩展HTML元素,以组件名称的方式作为自定义的HTML标签。组件可大大提高了代码的复用率。

组件的选项和vue的选项有什么区别

组件的选项和vue的选项区别:vue组件本质就是vue实例。

1、组件是把图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式。

2、在Vue中每一个.vue文件都可以视为一个组件。

vue项目中main.js、vue.js和index.html的关系

最近在学习vue.js,当创建好一个webpack 项目后,vue实例是怎么显示到网页上的呢?

新建好后在你的 webpackProject 项目里面主要有以下的文件夹

build:在开发阶段不用管

config:配置目录

node_modules:存放项目开发的依赖模块

src:开发目录,先在这里学习

static:静态资源,图片、字体可以放在这里

还有一个index.html 文件,这是首页的入口

src文件夹下有 App.vue 和 main.js 两个文件,App.vue就是个组件

App.vue中可以写 template 、js、style, 其中必须要有export default 来表示对外输出本模块

main.js是初始化vue实例并使用需要的插件

首先引入了Vue库和App.vue,创建了一个vue实例,template 和 components 写入相应的组件,并且选择要挂载的元素

最后在首页 index.html中写入

body

    div id="app"/div

/body

即可;

——  在中记录我的学习情况 ,以后继续深入   ——

vue实例&vue组件

不要在选项 property (属性)或回调上使用箭头函数比如 created: () = console.log(this.a) 或 vm.$watch('a', newValue = this.myMethod()) 。因为箭头函数并没有 this , this 会作为变量一直向上级词法作用域查找,直至找到为止,经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

tagName 为组件名,options 为配置选项。注册后,我们可以使用以下方式来调用组件:

下面实例中使用v-bind指令将todo传到每一个重复的组件中

我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface),即:

使用 $on(eventName) 监听事件

使用 $emit(eventName) 触发事件

另外,父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

以下实例中子组件已经和它外部完全解耦了。它所做的只是触发一个父组件关心的内部事件。

data必须是一个函数,这样的好处就是每个实例可以维护一份被返回对象的独立的拷贝,如果 data 是一个对象则会影响到其他实例,因为其他实例每次都是引用的daa对象,所以,data一改所以引用过data的实例的数据都将变化如下所示:

vue 组件通信方式 ,父子、隔代、兄弟 三类通信,六种方法

Vue 组件间通信只要指以下 3 类通信:父子组件通信、隔代组件通信、兄弟组件通信,下面分别介绍每种通信方式且会说明此种方法可适用于哪类组件间通信。

父组件注入,子组件接收。

这种方法是 Vue 组件的基础,相信大部分同学耳闻能详,所以此处就不举例展开介绍。

ref :如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例

$parent / $children :访问父 / 子实例

$attrs: 包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 ( class 和 style 除外 )。

当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 ( class 和 style 除外 ),并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 inheritAttrs 选项一起使用。

$listeners :包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件

祖先组件中通过 provider 来提供变量,然后在子孙组件中通过 inject 来注入变量。provide / inject API 主要解决了跨级组件间的通信问题,不过它的使用场景,主要是子组件获取上级组件的状态,跨级组件间建立了一种主动提供与依赖注入的关系。

这种方法通过一个空的 Vue 实例作为中央事件总线(事件中心),用它来触发事件和监听事件,从而实现任何组件间的通信,包括父子、隔代、兄弟组件。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store(仓库)。“store” 基本上就是一个容器,它包含着你的应用中大部分的状态 ( state )。

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。

改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。

vuex的详细使用方法: vuex管理状态仓库使用详解

a.vue 引用了一个detail组件

第一步:首先需要创建事件总线并将其导出,以便其它模块可以使用或者监听它。

两个初始化事件中心的方法:

第二步:创建了 EventBus ,接下来你需要做到的就是在你的组件中加载它,并且调用同一个方法,就如你在父子组件中互相传递消息一样。

假设你有两个Vue页面需要通信: A 和 B ,A页面 在按钮上面绑定了点击事件,发送一则消息,想通知 B页面。

接下来,我们需要在 B页面 中接收这则消息。

同理我们也可以在 B页面 向 A页面 发送消息。这里主要用到的两个方法:

如果使用不善,EventBus会是一种灾难,到底是什么样的“灾难”了?大家都知道vue是单页应用,如果你在某一个页面刷新了之后,与之相关的EventBus会被移除,这样就导致业务走不下去。还要就是如果业务有反复操作的页面,EventBus在监听的时候就会触发很多次,也是一个非常大的隐患。这时候我们就需要好好处理EventBus在项目中的关系。通常会用到,在vue页面销毁时,同时移除EventBus事件监听。

如果想移除事件的监听,可以像下面这样操作:

$on 事件是不会自动清楚销毁的,需要我们手动来销毁,否则在b组件每次加载一次就会创建一个监听,会重复监听到数据。

可以使用 EventBus.$off('aMsg') 来移除应用内所有对此某个事件的监听。

或者直接调用 EventBus.$off() 来移除所有事件频道,不需要添加任何参数 。

因为页面跳转的时候 ,a页面在之前已经emit了,但是b页面首次并没有created,b页面还监听不到。

可以把A页面组件中的emit事件写在beforeDestory中去。因为这个时候,B页面组件已经被created了,也就是我们写的$on事件已经可以触发了

所以可以,在beforeDestory的时候,$emit事件。例如:

【参考eventbus实战记录: 】


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:/java/748.html