1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > vue组件的基本使用 以及组件之间的基本传值方式

vue组件的基本使用 以及组件之间的基本传值方式

时间:2023-07-10 23:34:31

相关推荐

vue组件的基本使用 以及组件之间的基本传值方式

组件(页面上的每一个部分都是组件) 1.三部分:结构(template),样式(style),逻辑(script) 2.组件的作用:复用 3.模块包含组件 4.组件创建: 1.全局组件:ponent(); 2.局部组件:components(); 参数1:组件的名称 参数2:组件的配置项 *组件的配置项: 1.new Vue这个里面有什么参数,那么组件的配置项中就有什么参数,包含生命周期 2.组件内部多了一个属性template 3.组件内部的data不在是一个对象,而是一个函数 组件的使用: 1.直接将组件的名称当做标签使用即可 2.组件名称首字母必须大写 5.脚手架的使用 1.安装: 3.0 cnpm install @vue/cli -g 2.9.3 cnpm install vue-cli -g 2.创建项目 3.0 vue create <项目名称> 2.9.3 vue init webpack <项目名称> 6..组件间的传值(组件之间的通讯) 一.父子通信 1.父传子 传递:当子组件在父组件当做标签使用的时候,通过给子组件绑定一个自定义属性,值为需要传递的数据 接收:在子组件内部通过props进行接收 接收方式有两种: 1.一种是数组接收,2.另一种是对象接收 一般情况下我们都使用对象进行接收,因为对象接收可以校验数据的类型 eg: props:["val"]; props:{ val:String//当这个是number的时候,就会有警告 } 2.子传父 (1)传递:当子组件给父组件传递数据的时候,通过调用父组件给子组件绑定的自定义事件,然后将传递过去 接收:父组件通过自定义事件的函数来接收子组件传递过来的数据(注意这个自定义方法的函数在绑定的时候不需要加()) (2)作用域插槽 二、 非父子 1.在vue的原型身上添加一个公共的vue实例,组件之间调用这个公共的实例的$on and $emit来传递数据,传递的一方调用$emit,接收的一方用$on; 2.手动封装$on $emit $off(原理应用了观察者模式) 3.EventBus 4.vuex

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。