网站建设工程师证书,wordpress主题自媒体一号,湖州高端网站建设,谁知道苏州溪城水处理网站谁做的点击蓝色 “达达前端小酒馆” 关注我哦!加个 “星标” #xff0c;每天一篇文章#xff0c;一起学编程作者 | Jeskson来源 | 达达前端小酒馆Vue组件的概述组件是什么呢#xff0c;了解组件对象的分析#xff0c;Vue组件中的data属性#xff0c;props传递数据的原理到底是… 点击蓝色 “达达前端小酒馆” 关注我哦!加个 “星标” 每天一篇文章一起学编程作者 | Jeskson来源 | 达达前端小酒馆Vue组件的概述组件是什么呢了解组件对象的分析Vue组件中的data属性props传递数据的原理到底是什么。事件通信的那些事如何了解父子组件事件通信和遇到非父子组件事件通信如何处理。组件类型又是什么鬼自定义组件双向绑定v-model动态组件又是如何称为动态的为啥是动态呢递归组件如何理解递归。Vue组件的了解Vue的理解可以找我上一篇vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础组件是什么组件就是自己写好的一部分封装好的功能自己写的叫组件别人写的叫插件组件的运用是vue.js强大的功能之一组件的出现是为了提高代码的可重用性组件是一部分完整好的如果要使用你可以放到你自己任何的项目上去减少代码的重复书写。直接在你要用的地方引入即可是不是减少了重复性开发可以把组件的代码按照templatestylescript的拆分形式放到对应的文件中。template是什么它是模板(template)模板是声明了数据和最终展现给用户的dom之间的映射关系初始化数据data是什么一个组件的初始数据状态对于可以重复使用的组件来说通常是私有的状态方法methods是对数据进行操作的方法接收外部参数组件之间通过参数来进行数据的传递和共享props参数默认是单向绑定也可以双向绑定。回调函数一个组件可以触发多个回调函数created()attached()destroyed()。Vue组件全局注册与局部注册全局注册文件Vue.component(组件名, {组件参数})方式创建 // 创建全局组件 Vue.component(my-component,{ // template: 组件的HTML代码结构 template: this is dada});// Vue实例对象var vm new Vue({ el: #app});局部注册组件不是每个组件都是需要进行全局注册的也可以直接在vue实例对象的构造函数中使用compontent关键字进行注册自定义的组件。div idapp local-componentlocal-componentdivscript srchttps://unpkg.com/vuescriptscript// Vue实例UI小var vm new Vue({ el: #app, // 创建局部组件 components: { my-components: { template: this is my } } }});首先先创建局部组件对象然后注册Vue构造器中注册局部组件对象最后使用局部组件。app // 在默认情况使用camel标记法将ui自动转换为短横线形式 local-componentdiv // 自定义组件 const my Vue.component(my-component, { template: #my }); // vue实例对象 var vm new Vue({ el: #app });// 会出现程序错误因为vue组件只允许有一个根元素。组件template属性中包含div与P两个元素template idmy // 组件只允许有一个根元素 da da template// 成功vue组件中的data属性在组件中可以使用任何有效的Vue实例对象属性。data属性是Vue组件可用的响应式数据它是Vue实例的数据对象。在创建实例后用户可以通过vm.$data访问原始数据对象Vue实例也代理了data的所有属性。即vm.a 等价于 vm.$data.a以_或者是$开头的属性不会被Vue实例代理因为它们可能和Vue内置的属性以及api方法产生冲突。// 创建一个实例var vm new Vue({ data: data})vm.a // 1vm.$data data // true// Vue.extend()中的datavar Component Vue.extend({ data: function() { return { a: 1 } }})data属性必须声明为返回一个初始数据对象的函数。app my-component my template idmy this is my this is da {{message}} message update message 修改 template var data{ message: global } // 全局组件 const my Vue.component(my-component, { template: #my, // data属性表示当前组件使用的数据信息 // data属性必须是回调函数形式在回调函数中要返回对象 data: function() { return data; }}); // Vue实例对象 var vm new Vue({ el: #app });// 全局组件const my Vue.component(my-component,{ template: #my, // data属性表示当前组件使用额数据信息 // data属性必须是回调函数形式在回调函数中要返回对象 // data属性应该返回一个都有的对象 data: function() { return { message: component-message }; }});props传递数据父组件和子组件之间的通信使用props是组件数据中的一个字段子组件使用props来获取父组件的数据props可以是字面量语法动态语法绑定修饰符等。props字面量子组件通过props声明待接收的父组件数据父组件中使用子组件通过HTML属性为子组件传递数据。子组件const my { // props:声明接收父组件数据 props: [message], // data一样 template: {{message}}}父组件my-component messagemessage from parent by propsmy-componentconst my { props: [myMessage]; template: {{message}}}hello子组件props指明数据Vue.component(my-component,{ props: [message], template: {{message}}});my-component 动态语法idapp message message v-bind指令将HTML属性绑定到一个表达式上使用v-bind指令将动态props绑定到父组件的数据。var vm new Vue({ el: #app, data: { user: { name: test, age: 12 } }});绑定修饰符父组件的属性发生变化时会传递给子组件// 默认单向绑定parentMessage// 双向绑定parentMessage// 单向绑定parentMessage// 在子组件中修改props都会影响父组件的状态example input typetext v-modelinfo.name/ child v-bind:msg.once infochilddivconst dada new Vue();// 创建组件const child1Component{ template: #child1, methods: { updaeChild2: function(){ // 使用事件总线触发自定义事件 dada.$emit(child1-event,update name from child1); } }};const child2Component { template: #child2, props: [message], data: function() { return { name: child2 }; }, created: function() { // 保留当前vue组件对象 const app this; // 监听事件总线触发的事件 bus.$on(child1-event, function(param){ console.log(捕获); app.name param; });}};❤️ 不要忘记留下你学习的脚印 [点赞 收藏 评论]作者Info 【作者】Jeskson 【原创公众号】达达前端小酒馆。 【福利】公众号回复 “资料” 送自学资料大礼包(进群分享想要啥就说哈看我有没有) 【转载说明】转载请说明出处谢谢合作~大前端开发定位前端开发技术栈博客PHP后台知识点web全栈技术领域数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。谢谢支持承蒙厚爱感谢阅读原创不易喜欢就点个[在看] or [转发朋友圈]这是我写作最大的动力。意见反馈若本号内容有做得不到位的地方(比如涉及版权或其他问题)请及时联系我们进行整改即可会在第一时间进行处理。这是一个有质量有态度的公众号点关注有好运小编写作不易在看和转发走起来
