vue 基础知识积累

vue 基础知识积累

一、全局API

Vue.extend():基础的vue构造器，创造一个 vue对象子类，参数是一个包含组件选项的对象。（template, vue属性， style）

注意：

仅有的例外是像 el 这样根实例特有的选项。

一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

data: function () { return { count: 0 } }

why: 因为对象时引用类型 ，函数有自己独立的作用域。 组件可能会被多个实例同时引用，这将会导致多个实例共享同一个对象。

Vue.component ()： 注册一个vue组件 全局 （Key：组件名称， vue构造器对象）

// 定义组件： // 定义一个名为 button-counter 的新组件 Vue.component('button-counter', { data: function () { return { count: 0 } }, template: 'You clicked me {{ count }} times.' }) ---------------------------------- //使用组件：

--------------------------- //vue根实例中挂在自定义组件 new Vue({ el: '#components-demo' })

全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。

全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生

组件注册

局部注册：

vue全局注册是存在不完美的 ，因为全局注册 ，若是组件此时注册了 ，但是一段时间后业务调整导致组件不再被使用，但是构建时依旧会存在。造成了用户下载JavaScript代码增加。

解决办法： 在一个js文件中定义组件， 然后然后在 components 选项中定义你想要使用的组件：

// js文件 var ComponentA = { /* ... */ } var ComponentB = { /* ... */ } var ComponentC = { /* ... */ } //组件引用： new Vue({ el: '#app', components: { 'component-a': ComponentA, 'component-b': ComponentB } }) //ES2015 模块 写法声明 components: { ComponentA }, 这种写法相当于 ComponentA: ComponentA 即这个变量名同时是 用在模板中的自定义元素的名称 包含了这个组件选项的变量名

编码风格建议： 组件集中放置 ，然后通过 Babel 和 webpack 的模块系统 进行引用

import ComponentA from './ComponentA' import ComponentC from './ComponentC' export default { components: { ComponentA, ComponentC }, // 这个我不想写 ，但加深一次印象吧， 模块化，组件化确实风格清晰，利于维护 }

vue3使用了一个小技巧 ，是的全局注册基础组件，这个感觉vue2也可以实现 ，不难

vue.emit (enventName, […args]) 触发当前实例上的事件，可以用作通信。附加参数都会传给-回调。 子触发事件 ，夫监听，并执行。

可以通过$event访问这个args的值，但我没试过 ，感觉这样不方便，一般都会通过事件处理函数来解决这个问题。

实现方式 通过v-on：绑定-

// 创造子组件，并定义 Vue.component('welcome-button', { template: ` Click me to be welcomed ` }) //父子组件

new Vue({ el: '#emit-example-simple', methods: { sayHi: function () { alert('Hi!') } } })

二. 组件间数据的传递

Prop向子组件传递数据（）

Vue

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。