企业网站能自己建设吗,wordpress 文章列表 分页,做网站界面设计注意什么,湘潭网站设计外包公司组件通信6种方式
第一种#xff1a;props
适用于的场景#xff1a;父子组件通信
注意事项#xff1a;
如果父组件给子组件传递数据#xff08;函数#xff09;#xff1a;本质其实是子组件给父组件传递数据
如果父组件给子组件传递的数据#xff08;非函数#xf…组件通信6种方式
第一种props
适用于的场景父子组件通信
注意事项
如果父组件给子组件传递数据函数本质其实是子组件给父组件传递数据
如果父组件给子组件传递的数据非函数本质就是父组件给子组件传递数据
书写方式3种
【‘todos’】,{type:Array},{type:Array},{type:Array,default:[]}
小提示路由的props
书写形式布尔值对象函数形式 第二种自定义事件
适用于场景子组件给父组件传递数据
$on与$emit 第三种全局事件总线$bus
适用于场景万能
Vue.prototype.$busthis 第四种pubsub-js,在react框架中使用比较多发布与订阅
适用与场景万能 第五种vuex
适用与场景万能 第六种插槽
适用于场景父子组件通信--一般结构
默认插槽
具名插槽
作用域插槽
自定义事件深入
原生的按钮会触发handler事件但是组件event却不会。因为event1不是原生dom节点绑定的click不是原生dom事件而是自定义事件了。
如果我们需要使用原生的dom事件那么我们需要加修饰符nactive(可以把自定义事件变成原生dom事件) 其实原理就是用到了事件的委派 自定义事件需要$emit来绑定
v-model深入
v-model实现原理
原生的input的方式也能实现v-model的效果
原生DOM当中有oninput事件它经常结合表单元素一起使用当表单元素文本内容发送改变的时候就会发出一次回调
vue2就是通过value与input事件结合实现v-model功能
通过v-model实现父子组件数据同步
这样要注意这俩个:value是不一样的 组件上的props 这俩个都可以实现父子组件通信下面是缩写
效果是一样的
v-model实现原理value与input事件实现的而且还需要注意可以通过v-model实现父子组件数据
就是采用原理的方式将v-model就是一个input的事件然后将msg当做参数传递过去通过props:[value]来接收input的value值再然后通过$emit来发送给父组件中使用input当你使用v-model的时候就会默认绑定这个把$event.target.value发送过去
sync属性修饰符 $event就是自定义事件传过来的实参 为了防止我看不懂我没有采用它这种简写的方式。而是通过完整的方式实现它这种效果 如果使用sync修饰符 而加上sync修饰符它有俩种含义第一父组件给子组件传递props money
第二给当前子组件绑定了一个自定义事件而且事件名称即为updatemoney 效果也是一样但是更方便 这里有一个注意点new :money.syncmoney /new 那么子组件也应该为这个开头button click$emit(update:money,money-100)-100/button
而这个update是我们添加了sync的时候自动给我们添加上的
总结属性修饰符sync
可以实现父子组件数据同步
:money.sync ,代表父组件给子组件传递props[money] 给当前子组件绑定了一个自定义事件update:money
$attrs与$listeners
首先使用element-ui的的button 例如我们给他设置大小就用size
现在又一个需求也就是我们封装一个类似于这个的组件并且鼠标移动上去有提示信息 我们在父组件上设置一个自定义属性 而我们可以通过$attrs的方式来接收父组件给我们传递过来的参数
这里我们需要知道一件事如果props接受过的数据$attrs中获取不到信息了 带一个提示的功能我们可以在外面添加一个a标签 这样我们就可以把全部的属性绑定到子组件中但是要注意不能使用: 这里还有一个属性是$listeners它是可以监听到子给父传递的自定义事件 然后不能用简写的方式需要完整的。这样就能绑定父组件所有的自定义事件了
$children与$parent 这里有一个需求那就是父组件找子组件借钱父加钱子减钱。那如何拿到子组件的money呢
第一种方式ref 能拿到 那么如果向所有的孩子借钱当然。我们可以采用ref的方式但是太麻烦了。组件实例自身有一个属性$children,可以获取到当前组件当中全部子组件 $children是组件实例的属性可以获取当前组件的全部子组件【数组】
父拿子搞定。现在弄子给父 $parent组件实例的属性可以获取当前子组件的父组件进而可以操作父组件的数据与方法
混入mixin
如果项目当中出现很多结构类似功能想到组件复用。
如果项目当中很多的组件js业务逻辑相似就想到mixin。【可以把多个组件js部分重复相似的地方】
就是我们之前写的代码的子组件的methods的逻辑都是相同的此时就可以用到mixin
对外暴露相同的js业务逻辑 应用
作用域插槽
插槽可以实现父子组件通信通信的结构
默认插槽
具名插槽
作用域插槽子组件的数据来源于父组件子组件决定不了自身结构与外观 父组件然后给子组件传结构 子组件把每条数据回传给父组件 这样就有颜色可以区别开
像下面这个就是子给父回传一个index 回传的是一个对象我们完全可以解构出来
