组件通信方式（一）-创新互联

一、event深入 1、事件注意事项

事件：1、系统事件：点击、双击、鼠标系列等等

创新互联网络公司拥有10余年的成都网站开发建设经验，上千客户的共同信赖。提供网站制作、成都网站建设、网站开发、网站定制、外链、建网站、网站搭建、响应式网站、网页设计师打造企业风格，提供周到的售前咨询和贴心的售后服务

2、自定义事件

事件源（事件给谁绑定的）、事件类型（单击还是双击还是自定义等）、事件回调

1）原生DOM ----- （eg: button）可以绑定系统事件(单击、双击等等)

2）组件标签 ------- event1可以绑定系统事件（但是不起作用，因为属于自定义事件）

------- 在原生事件后加“.native”，可以把自定义事件变为原生DOM事件

注意：给原生DOM绑定自定义事件是没有任何意义的，因为没有办法触发$emit函数

二、v-model

v-model它是vue框架中的指令，它主要结合表单元素一起使用（文本框、复选框、单选按钮等等）

它主要的作用是收集表单数据

原生DOM当中是有oninput事件，它经常结合表单元素一起使用，当表单元素文本内容发生变化的时候就会触发一次回调

vue2中：可以通过value与input事件实现v-model的功能（ :value是单向绑定）

//v-model方式实现数据双向绑定{{msg}}
//原生的方式实现数据双向绑定    
//  :value是只能单向绑定{{msg}}

 data() {
     return {
        msg:''
    }
 }

v-model实现原理：是通过value与input事件实现的，而且还需要注意可以通过v-model实现父子组件数据同步。

v-mode实现父子之间的通信如下：

// 父组件  
// 注意：  :value是props   @input是自定义事件
// 以下两行代码等同//子组件

三、属性修饰符sync

可以实现父子组件数据同步

:money.sync的含义：

1、父组件给字符串传递props (money)

2、给当前子组件绑定了一个自定义事件，而且事件名称即为update:money（update:事件名）

以下两种方式效果一样

// 父组件

    小明的爸爸现在有{{money}}元
    不使用sync修饰符使用sync修饰符//子组件 1

    小明每次花100元爸爸还剩 {{money}} 元
  

//子组件2

    小明每次花100元爸爸还剩 {{money}} 元

四、$attrs与$listeners

他们两者是组件实例的属性，可以获取到父组件给子组件传递的props与自定义事件

具体用法如下：下面案例是对elementUI中的el-button按钮的二次封装

//父组件//子组件

五、$children与$parent

ref 可以获取到某一个组件的子组件

$children组件实例的属性也可以获取到当前组件的全部子组件（返回的是一个数组）

$parent组件实例的属性可以获取到当前子组件的父组件，进而可以操作父组件的数据与方法

案例如下：

父组件代码

子组件Son

子组件Daughter

六、混入mixin

如果项目当中出现很多结构类似功能，要想到组件复用

如果项目当中很多的组件JS业务逻辑相似，要想到mixin。

案例：就拿上面的案例来说道说道，把相同的代码封装到一起，然后引用，引用这里我就直接在上面的案例引入了，只需要两部：

1、import myMixin from "@/pages/Communication/ChildrenParent/myMixin/myMixin";

2、mixins: [myMixin],

下面是封装好的js文件。

export default {
    methods: {
        giveMoney(money) {
          this.money -= money;
          this.$parent.money += money;
        },
      },
}

七、插槽

可以实现父子组件通信（通信的是结构），插槽有三种：

1、默认插槽

2、具名插槽

3、作用域插槽：子组件的数据来源于父组件，但是子组件决定不了自身的结构与外观

案例如下（此案例为作用域插槽，其他的后续再补充）：

父组件：

子组件List:

子组件List1:

你是否还在寻找稳定的海外服务器提供商？创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源，准确流量调度确保服务器高可用性，企业级服务器适合批量采购，新人活动首月15元起，快前往官网查看详情吧

当前文章：组件通信方式（一）-创新互联
本文URL：http://wjwzjz.com/article/iosce.html

新网创想网站建设，新征程启航

组件通信方式（一）-创新互联

其他资讯