vue 组件1

注意:vue组件中的data必须为一个函数,要不vue就会停止工作。

构成组件

组件意味着协同工作,通常父子组件会是这样的关系:组件A在它的模板中使用了组件B,他们之间必然需要相互通信:父组件需要给子组件传递数据,子组件需要将它内部的发生的事情告诉父组件。然而,在一个良好定义的接口中尽可能将父子组件解耦是很重要的。这保证了每个组件在相对隔离的环境中书写和理解,也大幅提高了组件的可维护性和可重用性。

在vue中,父子组件的关系可以总结为props down和events up;父组件通过props向下传递数据给子组件。子组件通过events给父组件发送消息。

prop

使用prop传递数据

组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据。要让子组件使用父组件中的数据。我们需要使用子组件的props选项。

子组件要显式地用props选项声明它要获得的数据。

Vue.component(‘child‘, {

// 声明 props

props: [‘message‘],

// 就像 data 一样,prop 可以用在模板内

// 同样也可以在 vm 实例中像“this.message”这样使用

template: ‘<span>{{ message }}</span>‘

})

然后我们可以这样向它传入一个普通字符串:

<child message="hello!"></child>

结果:hello!

camelCase vs. kebab-case

html特性是不区分大小写的。所以当使用的不是字符串模板时,camelCased(驼峰式)命名的prop需要转换为相对应的kebab-case(短横线隔开式)命名:

Vue.component(‘child‘, {

// camelCase in JavaScript

props: [‘myMessage‘],

template: ‘<span>{{ myMessage }}</span>‘

})

<!-- kebab-case in HTML -->

<child my-message="hello!"></child>

动态prop

在模板中,要动态的绑定父组件的数据到子模板的props,与绑定到任何普通的html特性相类似,就是用v-bind,每当父组件的数据发生变化时,该变化也会传导给子组件。

<div>

<input v-model="parentMsg">

<br>

<child v-bind:my-message="parentMsg"></child>

</div>

使用 v-bind 的缩写语法通常更简单:

<child :my-message="parentMsg"></child>

字面量语法vs动态语法

初学者常犯的错误是使用字面量语法传递数值。

<!-- 传递了一个字符串 "1" -->

<comp some-prop="1"></comp>

因为它是一个字面prop,它的值是字符串“1”,而不是number.如果想传递一个实际的number,需要使用v-bind,从而让它的值被当作javascript表达式计算:

<!-- 传递实际的 number -->

<comp v-bind:some-prop="1"></comp>

单向数据流

prop是单向绑定的:当父组件的属性变化时,将传导给子组件,但不会反过来。这是为了防止子组件无意修改了父组件的状态--这会让应用的数据流很难理解。

另外,每次父组件更新时,子组件的所有prop都会更新为最新值。这意味着你不应该在子组件内部改变prop。如果你这么做了,vue会在控制台报出警告。

为什么我们会有修改prop的冲动,通常有两个原因:

1,prop作为初始值传入后,子组件想把它当做局部数据来用,

2,prop作为初始值传入,由子组件处理成其他数据输出。

对这两种原因,正确的应对方式是:

1,定义一个局部变量,并用prop的值初始化它。

props: [‘initialCounter‘],

data: function () {

return { counter: this.initialCounter }

}

2,定义一个计算属性,处理prop的值并返回。

props: [‘size‘],

computed: {

normalizedSize: function () {

return this.size.trim().toLowerCase()

}

}

注意在javascript中对象和数组是引用类型,指向同一个内存空间,如果prop是一个对象或数组,在子组件内部改变它会影响父组件的状态。

prop验证

我们可以为组建的props指定验证规格。如果传入的数据不符合规格,vue会发出警告。当组件给其他人使用时,这很有用。

要指定验证规格,我们需要用对象的形式,而不能用字符串数组:

Vue.component(‘example‘, {

props: {

// 基础类型检测 (`null` 意思是任何类型都可以)

propA: Number,

// 多种类型

propB: [String, Number],

// 必传且是字符串

propC: {

type: String,

required: true

},

// 数字,有默认值

propD: {

type: Number,

default: 100

},

// 数组/对象的默认值应当由一个工厂函数返回

propE: {

type: Object,

default: function () {

return { message: ‘hello‘ }

}

},

// 自定义验证函数

propF: {

validator: function (value) {

return value > 10

}

}

}

})

type 可以是下面原生构造器:

  • String
  • Number
  • Boolean
  • Function
  • Object
  • Array
  • Symbol 象征

type也可以是一个自定义的构造器函数,使用instance of检测。

当prop验证失败,vue 会抛出警告(如果使用的是开发版本).注意props会在组件实例创建之前进项校验,所以在default或validator函数里。诸如data,computed,或methods等实例属性还无法使用。

 

时间: 2024-10-10 18:55:46

vue 组件1的相关文章

关于vue组件的一个小结

用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维护成本更加的适合,而且最近看到Apache对react的相关许可限制:这里不讨论react和vue的对比哪个好,技术框架没有最好的,只有适合项目才是最好的. 进入主题....... 组件,是vue的核心之一. 我们可以把页面各个子模块看成一个组件,可以独立拆分出来.这样不仅维护变得简单了,而且代码复

vue组件

require.js 加载 vue组件 r.js 合并压缩 require.js 参考阮一峰 Javascript模块化编程(三):require.js的用法r.js 合并压缩 参考司徒正美 r.js合并实践 准备: vue.js 原本是学习vue组件 require.js 然后想到用require 加载 r.js 文件太多 合并 文件目录 忽略部分文件及文件夹 一.先说vue 组件 先引入vue 再引入vue组件 Vue.extend({}) 定义组件 template data method

Vue组件开发分享

在开始本文之前,你可能需要先了解以下相关内容: Vue.js  一款高性能轻量化的MVVM框架 Webpack  前端模块化代码构建工具 Vue组件介绍 基于vue.js高效的双向数据绑定特性,让我们在开发高可用组件时可以更加专注于数据逻辑开发: 忘记DOM操作,忘记事件绑定,让开发的专注力集中于数据上: 1.定义需要使用的数据及类型 2.在合适的时机更新数据 3.在模板上绑定数据与视图的映射关系 4.开放对外调用接口 代码 https://github.com/xiaoyunchen/vue-

vue组件最佳实践

看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的.1.让开发者和开发团队更容易发现一些事情.2.让你更好的利用你的IDE.3.让你更加容易的使用打包工具4.让你的代码更容易碎片化以达到复用的目的. 基于模块开发 用一些功能单一的小模块来组织你的应用 Why? 对于你自己和你团队的人来说较小的模块更容易看懂 维护 复用和调试. How? 每个组件应该保持单一 独立 可复用 可测试把你很大的组件拆

vue 组件属性props,特性驼峰命名,连接线使用

今天在学习vue的时候碰到了一个有趣的问题 是这样的,先来个话题引入,后面会用到 var myname={ 'first-name':'9', 'last-name':'l o n g' } console.log(myname.first-name); console.log(myname['first-name']); 打印出来是  NaN  9 解释下,之所以没有前面没有打印出来9,是因为程序走的时候,把我们认为的英文连接符当做减号看待,myname.first是undefined,nam

vue组件的使用1

创建vue组件,看了别人的教程 http://www.cnblogs.com/keepfool/p/5625583.html,自己也总结一下 一.’创建vue组件有四个步骤: 全局组件 1.用Vue.extend()构建一个你需要渲染的html; 2.调用Vue.component('Html里自己创建的标签',1步骤中创建的构造器名称); 3.创建一个vue实例,让其他的挂载在其标签下面; 4.html中写自己要创建的标签 <div id="app1"> <my-c

vue组件的引用:

本文是基于vue-cli脚手架的基础上对vue组件的引用做简单介绍,关于vue-cli脚手架,请见:vue脚手架的安装流程(vue-cli). 在src文件夹下创建components文件夹,并在其下面创建Home.vue和List.vue两个文件: 在App.vue中引入Home.vue和List.vue两个组件: 这样Home.vue和List.vue两个组件就被引入到App.vue组件里面了,效果图如下: 注意:引入组件的component是要带s的,而配置路由的component不要带s

JS组件系列——又一款MVVM组件:Vue(二:构建自己的Vue组件)

阅读目录 一.为什么组件很重要 二.Vue里面的组件基础知识 1.组件的概念 2.组件原理 3.组件使用 三.封装自己的Component 1.使用Component封装bootstrapTable 2.封装select 3.查看其他Vue框架源码 四.总结 正文 前言:转眼距离上篇 JS组件系列--又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue的发展也是异常迅猛,不过这好像和博

webpack单独构建scss文件与.vue组件里构建scss的一个坑

在入口main.js里构建scss是通过引入模块的方式 import './assets/_reset.scss'; import './assets/_flex.scss'; import './assets/_functions.scss'; 在.vue组件里是单独构建的 <style lang="scss" scoped> img { width: rem(300px); } #product, .gallery, .detail { width: rem(750px

Vue组件基础用法

前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需,使用不同的组件来拼接页面.这种开发模式使前端页面易于扩展,且灵活性高,而且组件之间也实现了解耦.本文将详细介绍Vue组件基础用法 概述 组件是一个自定义元素或称为一个模块,包括所需的模板.逻辑和样式.在HTML模板中,组件以一个自定义标签的形式存在,起到占位符的功能.通过Vue.js的声明式渲染后,