vue组件通信--emit/on

开头先简单说一下组件
用的最多的就是组件里面包含各种各样的组件 处理组件的各种关系
组件有全局的有局部的，在vue-cli类似的脚手架里面 通常使用template，
style script 其实还有一种方式使用的有多 就是在script里面使用render函数接收props与上下文内容 也是可以的如下图

组件导入使用的开头也就是对应这 思想一样 代码有一点点区别其实还是一样的。

进入正题 申请 但凡不是和html标签元素同名的 都是子组件

<dinput :value="str" @input="(val)=>inp(val)"></dinput>
<dinput v-model="str" /> // 换一种方式 
<template>
  <div>
    <input type="text" :value="$attrs.value" @input="(e)=>{$emit('input',e.target.value)}">
  </div>
</template>

<script>
export default {
     
  mounted() {
     
    console.log(this.$listeners,"input")
    // {input: ƒ} "input" 打印如下
  }
}
</script>

上图一模一样 所以 影发了什么思考

官网说 v-model在不同的表单控件什么 编译后的方法基本上都是方法名字为input的方法。
拓展出 如果让你封装一个el-input 你应该要知道怎么做

如图所示 用原生表单控件的方法来触发 通过编译出来的父组件上面的input，使用emit在子组件触发 然后改变父子组件状态 所以你又想起了什么？？？
通常使用props的时候 我们想去改变状态 却提示警告错误 不允许我们修改对吧，所以这边给我们提供了新的方案
比如 如图所示 sync的修饰符 与emit方法来避免这个错误
这样就可以同步改变状态 很不错的


拓展如下

#sex =>v-slot:sex="row"

可以把上面的$attrs改为如下的model属性写法

<dinput v-model="str" />
<template>
  <div>
    <input type="text" :value="value" @input="(e)=>{$emit('input',e.target.value)}">
  </div>
</template>

<script>
export default {
     
  props: {
     
    value: {
     
      type: String,
      default: 12
    }
  },
  model: {
     
    prop: "value",
    event: "input"
  },
  mounted() {
     
    console.log(this.$listeners,"input")
  }
}
</script>

<style>

</style>