vue.js初学者教程(2)

时间：2021-09-13 来源：互联网编辑：宝哥软件园浏览：次

然后学习上一个vue慢速入门教程。

4.组件使用基础

什么是组件？组件可以理解为可重用的自定义HTML。您可以使用一堆组件来构建一个大型应用程序，任何类型的应用程序接口都可以抽象为一个组件树：

您可以将组件代码放入相应的。vue文件按照模板、样式和脚本的拆分方式。预定义选项的核心组件是：

模板、初始数据、可接受的外部参数、方法和生命周期道具。

4.1基本步骤

要使用组件，首先需要创建一个构造函数：

var my component=Vue . extend({//option.})要将此构造函数用作组件，您需要向Vue.component(标记，构造函数)注册：

//用标记my-component vue.component(' my-component '，mycomponent)全局注册组件，然后使用：

！DOCTYPE html html head meta charset=' UTF-8 ' title/title/head body div id=' XXX ' my-component/my-component/div/body Script src=' http : js/vue . js '/Script Script var my component=vue . extend({ template : ' p 9898！/p ' })；Vue.component('my-component '，my component)；new Vue({ El : ' # XXX ' })；/script/htmlwhere，

Vue。组件(' my-component '，mycomponent)是一个全局注册。第一个参数是注册组件的名称，第二个参数是组件的构造函数。

选项对象的模板属性用于定义HTML由组件呈现；

组件的模板替换了自定义元素，该元素仅用作挂载点。组件只有安装到vue实例上才会生效。

对于自定义的标签名，Vue.js并不要求遵循W3C规则(小写，包括一个短横条)，虽然遵循这个规则是为了避免不必要的麻烦。

4.2本地注册

向实例选项组件注册：

！DOCTYPE html html head meta charset=' UTF-8 ' title/title/head body div id=' XXX ' my-component/my-component/div/body Script src=' http : js/vue . js '/Script Script var my component=vue . extend({ template : ' p 9898！/p ' })；//Vue.component('my-component '，my component)；new Vue({ el: '#xxx '，components : { ' my-component ' : my component } })；/script/html还可以定义和使用组件中的其他组件：

！DOCTYPE html html head meta charset=' UTF-8 ' title/title/head body div id=' example ' xx-component/xx-component/div/body脚本src=' http : js/vue . js '/脚本var Child=vue . extend({ template : ' divi am zai/div '，replace : true })var Parent=vue . extend({ template : ' pi am Baba/pbr/wa/wa '，component 3360

其中，子组件只能在父组件的模板中使用。

另外，有了简写，Vue会在背后自动调用Vue.extend():

！DOCTYPE html html head meta charset=' UTF-8 ' title/title/head Body div id=' XXX ' my-component-continue/my-component-continue/div/Body script src=' http : js/vue . js '/script script//本地注册的简化编写varvm2=newvue ({el3360' # XXX '，component 3360 { ' my-component ' 3360 { template 3360 ' div 9898！/div'}，' my-component-continue ' : { template : ' div，五谷丰登！/div ' } } })/脚本/html

4.3组件选项问题

定义组件选项时，数据和el选项必须使用函数。

如果数据选项指向一个对象，这意味着所有组件实例共享一个数据。因此，您应该使用函数作为数据选项，并让该函数返回一个新对象：

同样，el选项在Vue.extend()中使用时必须是一个函数。

5.数据传输

Vue.js组件之间有三种数据传输模式：

道具组件通信槽

5.1道具

"道具"是组件数据的一个字段，期望从父组件传下来数据。因为组件实例的作用域是孤立的，所以子组件需要显式地用小道具选项来获取父组件的数据。

小道具选项可以是字面量、表达式、绑定修饰符。

5.1.1 字面量

！DOCTYPE html html head meta charset=' UTF-8 ' title/title/head body child msg=' hello！'/子脚本src=' http : js/vue。js ' type=' text/JAVAScript ' charset=' utf-8 '/脚本脚本类型=' text/JavaScript ' vue。组件('子'，{ //声明道具道具： ['msg']，//道具可以用在模板内//可以用“这个.味精”设置template: 'span{{ msg }}你困吗/span' })新Vue({ El : ' body ' })/脚本/body/html

超文本标记语言特性不区分大小写。名字形式为camelCase的支柱用作特性时，需要转为烤肉串盒（短横线隔开):

Vue.component('child '，{/camelCase in JavaScript prop :['我的消息']，模板： ' span { {我的消息} }/span ' })！-烤串超文本标记语言中的大小写-我的孩子-消息='你好!'/儿童5.1.2动态

类似于用垂直装订绑定超文本标记语言特性到一个表达式，也可以用垂直装订绑定动态小道具到父组件的数据。每当父组件的数据变化时，也会传导给子组件。比如酱：

！DOCTYPE html html head meta charset=' UTF-8 ' title/title/head body div input v-model=' parentMsg ' br child : my-message=' parentMsg '/child/div script src=' http : js/vue。js ' type=' text/JavaScript ' charset=' utf-8 '/script script type=' text/JavaScript ' vue。组件('子'，{ prop :['我的消息']，模板你困吗/span' })新Vue({ el: 'body '，数据： { parentmsg : ' ' })/脚本/body/html当我在投入里面输入哈哈的时候：

5.1.3 绑定类型

可以使用绑定修饰符：同步，双向绑定。曾经，单次绑定

！-默认为单向绑定-child : msg=' parentMsg '/child！-双向绑定-儿童：味精。sync=' parentMsg '/child！-单次绑定-儿童：味精。once=' parentMsg '/子道具默认是单向绑定：当父组件的属性变化时，将传导给子组件，但是反过来不会。

不过需要注意的是：如果支柱是一个对象或数组，是按引用传递。在子组件内修改它会影响父组件的状态，不管是使用哪种绑定类型。

示例：

！DOCTYPE html html head meta charset=' UTF-8 ' title/title/head body div id=' app ' table tr th colspan=' 3 '父组件数据/TD/tr TD name/TD TD TD TD { { name } }/TD TD TD input type=' text ' v-model=' name '/TD/tr TD age/TD TD { { age } }/TD TD TD input type=' text ' v-model=' age '/TD/tr/table my-component v-bind : my-name。sync=' name ' v-bind : my-age=' age '/my-component/div模板id='我的组件'表tr th colspan='子组件数据/TD/tr TD my name/TD TD { { myName } }/TD TD TD input type=' text ' v-model=' myName '/TD/tr TD my age/TD { { myAge } }/TD TD TD input type=' text ' v-model=' myAge '/TD/tr/table/template script src=' http : js/Vue。js '/script var VM=new Vue({ El 3360 ' # app '，data: { name: 'k '，age: 24 }，components : { ' my-component ' : { template : ' # my component '，prop :[' my name '，' my age ']} } } })/script/body/html上面这段设置了名字双向，年龄单向：

以下是一个大神的综合示例：

可以检索：

其中，{{ col |大写}}过滤，首字母大写。

tr v-for='数据中的条目| filterBy filterKey'td v-for='列中的列{entry[col]}}/td/tr过滤搜索关键词；

双循环，tr循环数据条数，4行，入口表示每行；任务描述循环列数量，3列上校表示每列，条目[栏]取具体数据。

props: { data:数组，第3360列数组，filterKey:字符串}验证：父组件传递过来的数据和列必须是排列类型，filterKey必须是字符串类型。

验证要求示例：

Vue.component('示例，道具s 3360 {//基础类型检测(` null意思是任何类型都可以)丙烷：号，//多种类型(1 .0 .21)propm :[字符串，数字],//必需且是字符串propB: { type: String，required: true }，//数字，有默认值propC: { type: Number，default: 100 }，//对象/数组的默认值应当由一个函数返回propD: { type: Object，default : function(){ return { msg : ' hello ' } } }，//指定这个支柱为双向绑定//如果绑定类型不对将抛出一条警告属性： {双向： true }，//自定义验证函数propF: { validator:函数（值){返回值10 } }, //转换函数(1.0.12 新增) //在设置值之前转换值propG: {强制：函数(val){ 0返回值' '//将值转换为字符串} }，propH: {胁迫：函数(val){ 0返回JSON.parse(val) //将JSON字符串转换为对象} } }})Stringtype可以是下面原生构造器：

NumberBooleanFunctionObjectArray

类型也可以是一个自定义构造器，使用实例f检测。

当支柱验证失败时，Vue将拒绝在子组件上设置此值，如果使用的是开发版本会抛出一条警告。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

参考：Vue.js——60分钟组件快速入门（上篇)

《vue.js权威指南》