个人网站栏目设计,个人建设网站服务器怎么解决方案,阿里云多网站,wordpress自定义文章顺序文章目录 一、组件介绍与定义介绍定义1#xff09;全局组件2#xff09;局部组件 二、组件之间的通信1#xff09;父组件向子组件传递数据2#xff09;子传父通信 一、组件介绍与定义
介绍 组件(Component)是Vue.js 最强大的功能之一#xff0c;它是html、css、js等的一个… 文章目录 一、组件介绍与定义介绍定义1全局组件2局部组件 二、组件之间的通信1父组件向子组件传递数据2子传父通信 一、组件介绍与定义
介绍 组件(Component)是Vue.js 最强大的功能之一它是html、css、js等的一个聚合体。封装性和隔离性非常强。 组件相当于Python中的模块扩展HTML元素可以重复使用的代码使用它就是为了重复使用 例如一个轮播图需要使用放到很多页面当中使用一个轮播图有它自己的js、css、html而组件就可以快捷的做出一个轮播图有自己的js、css、html放到一起有自己的逻辑样式这样到哪里都可以使用了无需在写重复代码
模块化 是从代码逻辑的角度进行划分的方便代码分层开发保证每个功能模块的职能单一组件化 是从UI界面的角度进行划分的前端的组件化方便UI组件的重用。 定义
1全局组件
语法 Vue.component(组件名称, { })第1个参数是标签名称第2个参数是一个选项对象。全局组件注册后任何vue实例都可以用。 组件注意事项
构造Vue实例时传入的各种选项大多数可以在组件里使用(el不能使用)只有一个例外data必须是函数同时这个函数要求返回一个对象保证数据唯一性防止对象发生污染。组件模版必须是单个根元素(html标签)组件模版的内容可以是模版字符串 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8titleDocument/titlescript src../js/vue.js/script/headbodydiv iddivh1组件/h1button clickhandleClick点击显示/buttonhr!--全局组件--child v-ifshowtrue/child/div scriptvar vm new Vue({el:#div,data:{show:false,},methods:{handleClick(){this.show!this.show}}})//定义全局组件一次定义随时使用//一但声明完成就可以在所有的组件中直接使用无需引入和注册Vue.component(Child,{//模版字符串template:divh1{{name}}/h1button clickclickname点击更改名字/button/div,/*render 用于直接生成虚拟dom生成标签在工程化中render中可以直接写jsx,在引入一个babel可以写jsx语法(js的增强版本)render(h) {// h(生成的标签名称,标签中有哪些属性没有属性就是null,子元素是什么)let vnode h(h3, { attrs: { name: abc, style: color:red } }, 我是一个标签)return vnode}*/data(){return{name:tom,}},methods:{clickname(){this.namejack}}})/script/body/html没有使用工程化时我们使用浏览器解析标签所以定义组件不能使用单标签写法否则组件无法被多次执行因为但标签写法浏览器在解析的时候觉得有问题不再执行后续标签。而在工程化中我们会使用很多包来编译html标签单标签写法是允许的 2局部组件
单文件局部组件 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8titleDocument/titlescript src../js/vue.js/script/headbodydiv iddivchild/child/div script// 创建局部组件,它就是一个对象// 局部组件在创建完成后如果你要给别人使用一定要在配置中进行对应的配置var child {template:divh1自定的局部组件/h1{{title}}/div,data(){return {title:hello world,}}}var vm new Vue({el:#div,data:{},methods:{},//局部组件要加scomponents:{// key就是在使用时的标签名称// value就是对应的局部组件对象// child: child// 简写child}})/script/body/html直接编写在组件内部的局部组件 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8titleDocument/titlescript src../js/vue.js/script/headbodydiv iddivchild/childhr!--定义在内部的局部组件需要写在上一层组局的template中--mcq/mcq/div scriptvar child {template:divh1自定的局部组件/h1{{title}}/div,data(){return {title:hello world,}}}//注意根组件与全局组件无任何关联关系需放在根组件前面执行否则会报错//在全局组件内定义局部组件Vue.component(mcq,{template:divh1我是全局组件/h1xxx/xxx/div,data(){return {}},//在内部定义的局部组件components:{xxx:{template:divh2我是局部组件/h2/div,data(){return {}},}}})var vm new Vue({el:#div,data:{},methods:{},//局部组件要加scomponents:{// key就是在使用时的标签名称// value就是对应的局部组件对象// child: child// 简写child}})/script/body/html二、组件之间的通信 组件与组件之间的嵌套使用避免不了数据之间的传递。那么Vue中组件的数据是如何传递的呢组件间数据传递不同于Vue全局的数据传递组件实例的数据之间是孤立的不能在子组件的模板内直接引用父组件的数据。如果要把数据从父组件传递到子组件就需要使用props属性。在Vue中父子组件的关系可以总结为prop向下传递事件向上传递。父组件通过prop给子组件下发数据子组件通过事件给父组件发送消息。所以我们也会经常遇到组件之间需要传递数据的时候大致分为四种情况 父组件向子组件传递数据通过props传递数据子组件向父组件传递数据通过events自定义事件—回调函数传递数据。两个同级组件兄弟组件之间传递数据通过EventBus事件总线–只适用于极小的项目、Vuex(官方推荐)传递数据其他方式通信-处理边界情况 1 $parent父实例如果当前实例有的话。通过访问父实例也能进行数据之间的交互但极少情况下会直接修改父组件中的数据。2$root当前组件树的根 Vue 实例。如果当前实例没有父实例此实例将会是其自己。3$children当前实例的直接子组件。需要注意 $children 并不保证顺序也不是响应式的。如果你发现自己正在尝试使用 $children 来进行数据绑定考虑使用一个数组配合 v-for 来生成子组件并且使用 Array 作为真正的来源。4 $ref一个对象持有注册过 ref attribute 的所有 DOM 元素和组件实例。访问子组件实例或子元素5 provide / inject。主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。并且这对选项需要一起使用以允许一个祖先组件向其所有子孙后代注入一个依赖不论组件层次有多深并在起上下游关系成立的时间里始终生效。 1父组件向子组件传递数据 1.通过自定义属性---自定义的变量不能用驼峰不要与子组件中的变量冲突父组件里 child :namename /child2. 子组件中引用props,可以指定自定义属性的类型也可以直接用数组props:{name:String} // props:[name] /可以接收多个!DOCTYPE htmlhtml langenheadmeta charsetUTF-8titleDocument/titlescript src../js/vue.js/script/headbodydiv iddivh1组件通信之父传子自定义属性/h1父组件中的名字{{name}}hrglobal :namename/global/div scriptVue.component(global,{template:divh2我是global组件/h2h3父组件传递给子组件的{{name}}/h3/div,data(){return{}},props:[name,]})var vm new Vue({el:#div,data:{name:jack,},methods:{},})/script/body/html2子传父通信 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8titleDocument/titlescript src../js/vue.js/script/headbodydiv iddivh1组件通信之子传父自定义事件/h1父组件接收的名字{{p_name}}hrglobal myeventhandleEvent/global/div scriptVue.component(global,{template:divh2我是global组件/h2input typetext v-modelnamebutton clickhandleSend点击传递给父组件/button/div,data(){return{name:jack,}},methods:{handleSend(){this.$emit(myevent,this.name)}}})var vm new Vue({el:#div,data:{p_name:,},methods:{handleEvent(name){console.log(接收到了子组件传递的名字name)this.p_namename}},})/script/body/html
