网站报价单,电子商务网站开发目的和意义,企业信用信息系统官网,做网站电话在应用程序的开发中#xff0c;组件是不可缺少的。在Vue的使用中#xff0c;同样也会用到组件。 vue组件的一般知识点#xff1a; 1、组件的名字唯一#xff1b; 2、组件以Html形式书写#xff1b; 3、组件可以复用#xff1b; 4、组件可以嵌套… 在应用程序的开发中组件是不可缺少的。在Vue的使用中同样也会用到组件。 vue组件的一般知识点 1、组件的名字唯一 2、组件以Html形式书写 3、组件可以复用 4、组件可以嵌套 5、组件可以相互调用 6、组件分为可视化组件和非可视化组件。 一般情况下组件写在一个单独的文件中在使用的时候按需引入和使用。 一、组件的定义和使用
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleVue组件的定义与使用/titlescript srcvue.js/script
/head
bodydiv iddemo1 stylebackground-color: aquamarine;p这是demo1组件/pmy-html1/my-html1my-html2/my-html2my-html3/my-html3my-html5/my-html5my-html7 inline-templatediv{{title}}/div /my-html7/divdiv iddemo2 stylebackground-color: darksalmon;p这是demo2组件/pmy-html1/my-html1my-html2/my-html2my-html4/my-html4my-html6/my-html6/divtemplate idcomponent5divp组件5/p/div/template script typetext/x-template idcomponent6divp{{ mytitle }}/p/div/scriptscriptvar mycompponet5{template:#component5}//创建组件模板对象const mytemplateVue.extend ({template:divp标签组件1/p/div});//注册全局组件Vue.component(my-html1,mytemplate);Vue.component(my-html5,mycompponet5);Vue.component(my-html6,{template:#component6,data(){{ return {mytitle:组件6} }}});Vue.component(my-html7,{data(){return {title:组件7 }}});//注册组件的另外方式是直接写内容Vue.component(my-html2,{data(){ return {count:1} }, template:button v-on:clickcount按钮组件2点击数{{count}}/button});const myhtml3{data(){ return { count:0} },template:button v-on:clickcount按钮组件3点击数{{count}}/button}//创建vue对象const vueApp1new Vue({el:#demo1,components:{my-html3:myhtml3}});const vueApp2new Vue({el:#demo2,components:{my-html4:{data(){ return { count:0} },template:button v-on:clickcount按钮组件4点击数{{count}}/button }}}); /script
/body
/html 显示结果 从上面的代码中可以看出vue的组件有7种写法之多实际的编码过程中可以根据个人喜好选择。 二、组件的嵌套
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleVue组件的嵌套/titlescript srcvue.js/script
/head
bodydiv iddemo stylebackground-color: aquamarine;my-html1/my-html1my-html2/my-html2/divscript//创建组件模板对象const AloneTemplate{template:divp独立的组件1/p/div};Vue.component(my-html1,{data(){ return {count:1} }, template:divbutton按钮组件/buttonchildcomponet/childcomponet/div,components:{childcomponet:AloneTemplate}});Vue.component(my-html2,{data(){ return {count:1} }, template:divbutton按钮组件/buttonchildcomponet/childcomponet/div,components:{childcomponet:{template:divp独立的组件2{{count}}/p/div }}});//创建vue对象const vueApp1new Vue({el:#demo});/script
/body
/html 上面是组件嵌套的两种写法。 三、组件的传值与通信
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleVue的通信/titlescript srcvue.js/script
/head
bodydiv iddemo stylebackground-color: aquamarine;html-a v-bind:incomepara1worker v-bind:incomepara2program/html-a/divscriptconst AloneTemplate{data(){ return { name:人员列表 } },template:divp{{name}}/pp人员1{{ incomepara1.name --incomepara1.age}}/pp人员2{{incomepara2.name}}--{{incomepara2.age}}/p/div,props:[incomepara1,incomepara2]};const vueAppnew Vue({el:#demo,data:{worker:{ name:json,age:37 },program:{ name:sdf,age:31 }},components:{html-a:AloneTemplate}});/script
/body
/html 注意 1、props是一个数组它起到桥梁的作用可以传递多个参数具体的参数可以是数组、变量名也可是对象传递对象就可以传递丰富的参数值。 2、props可以理解为代理对于组件而言通过v-bind让props的参数指向父项的具体参数对于组件内部就可以直接使用了。 3、v-bind的绑定时括号里面可以是运算表达式。 4、参数传递是对象的写法
props:{age:Number,//表示年龄是数字name:[String,Number],//表示姓名可以是字符串或者数字mydate{Date,default:2000-1-1},arrlist:{type:Array,default:[],required:true //表示必须输入},myobj} 下面是一个子组件与父组件相互通信的例子
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue Component Communication/titlescript srcvue.js/script
/head
bodyscript typetext/x-template idmycomponentdiv stylebackground-color: aquamarine;width: 500px;h2这是子组件/h2姓名input typetext v-modelmyPerson.name/年龄input typenumber v-modelmyPerson.age/h3这是来自父组件的信息我是{{ proxyperson.name }}今年{{proxyperson.age}}岁。/h3button clickemitEvent发送信息给父组件/button/div/scriptdiv idapp stylebackground-color: rgb(140, 91, 201);width: 600px;h2这是父组件/h2姓名input typetext v-modeldawn.name/年龄input typenumber v-modeldawn.age/h3这是来自子组件的信息我是{{ childperson.name }}今年{{childperson.age}}岁。/h3mycomponent :proxyPersondawn custom-eventhandleEvent/mycomponent /br/divscriptVue.component(mycomponent, {data(){return { myPerson:{ name:John,age:23 }}},template: #mycomponent,props: [proxyperson],methods: {emitEvent() { this.$emit(custom-event, this.myPerson); }}});new Vue({el: #app,data: {dawn:{ name:SDF,age:35 },childperson:{ name:,age:0 }},methods: {handleEvent(obj) { this.childpersonobj; }}});/script
/body
/html 显示结果 父组件中的信息变化与子组件中的信息同步这是因为prop起到了绑定对象的作用子组件中的信息变化在点击按钮【发送信息给父组件】后因为对象绑定了在自定义的事件custom-event中调用了父组件的方法handleEvent(obj)所以也是实时变化同步。 组件之间的通讯也可以借助父对象来进行这样父对象起到桥梁的作用不过这样的方法不值得推荐特殊的情况下可以使用。
!DOCTYPE html
html
headtitleVue组件间通信示例-人员列表/titlescript srcvue.js/script
/head
bodydiv idappadd-person :mypersonsparentpersonlist/add-personperson-list :mypersonsparentpersonlist/person-list/div!-- 组件 AddPerson --template idadd-persondivlabel姓名/labelinput v-modelname typetextbutton clickaddPerson增加人员/button/div/templatetemplate idperson-listdivulli v-forperson in persons{{ person }}/li/ul/div/templatescript//组件:AddPersonVue.component(add-person, {data(){return { childpersons:this.mypersons,name: }},template: #add-person,methods: {addPerson() {this.childpersons.push(this.name);this.$emit(update:parentpersonlist);}},props: [mypersons]});//组件:PersonListVue.component(person-list, {data(){ return { persons:[] } },template: #person-list,props: [mypersons],created() { this.personsthis.mypersons; }});new Vue({el: #app,data:{ parentpersonlist:[张1, 李2, 王3] }});/script
/body
/html 结果显示 2023年一月份的时候学习vue写了三篇文章分别是 1、Vue组件化编程的基础知识要点 2、Vue组件化编程的组件通信 3、三种简洁易行的方法解决基于Vue.js的组件通信 一年过去了我都快忘记了以前是断断续续地学并没有做个项目看来学习需要实时跟进并且要加以适当的练习。 编程就是这样学会容易上手也很快但是不做项目加以巩固等于没有学
