Vue的属性、事件、插槽

属性

  • 自定义属性props ->组件的propos中声明的属性
  • 原生属性attrs ->没有声明属性,默认自动挂载在组件的根元素上,inheritAttrs可以关闭自动挂载
  • 特殊属性class、style ->挂载到组件根元素上,支持字符串、对象、数组等多种用法

子组件为何不可以修改父组件传递的propos?
如果修改了,Vue是如何监控到属性的修改并给出警告的?
按个人的理解的话:由于单向数据流,属性只能通过父组件传递到自组件,但是不能反过来,至于Vue监控属性的修改给出警告的话,应该回到我们的生命周期,在事件发生改变之后呢,Vue重新修改,更新DOM节点,发现属性值修改之后更新原有的DOM节点,但是在编译、渲染的时候发现不对了,然后就开始报错。

事件

  • 普通事件 ->@click、@input、@change等事件,通过this.$emit('',...)触发
  • 修饰符事件 ->@input.trim,@click.stop,@sumbmit.prevent等,一般用于原生的HTML元素,自定义组件需要自行开发支持

this.$emit的返回值?
感觉有个博客写的不错
https://www.cnblogs.com/padding1015/p/7878741.html

插槽

就是子组件提供给父组件使用的一个占位符,父组件中可以添加任何代码、数据放置在子组件的slot标签中

  • 匿名插槽:没有name属性,所以叫做匿名插槽
<tag1>插槽里面的东西</tag1>  //将要写的内容写在标签内
var tag1mes = {
  template:`<dl> 
//在slot中可以添加属性值,也就是作为其默认值,在其后添加标签,可以修改原有的默认标签属性值
    <dt><slot></slot></dt>  //添加一个slot标签,定于的就是一个插槽
    <dd>插槽插入内容之后的一段文字</dd>
  </dl>`
}
  • 具名插槽
    比如说,替换的东西很多啊,在渲染数据的时候,我需要的东西很多,但是总不可能全部都用匿名的吧,到时候都乱套了
    所以呢?这时候用上具名插槽就很有必要了
<tag1 :fatherdata="fatherdata">
        <template slot="tit">我的标题</template>
        <template slot="mes">我的内容</template>
</tag1>

template:` <dl>
      <dt><slot name="tit">默认标题</slot></dt>
      <dd><slot name="mes">默认的内容</slot></dd>
</dl>`

通过slot的name属性,将slot与template对应起来
但是在2.6+的版本中,没有了slot方法,使用了v-slot,使用的时候必须放在template中使用

注:

  1. 父组件要添加子组件时,没有对应的插槽名,不会被填充进去
  2. 子组件有多个默认插槽,父组件的内容全都会插进去(具名的作用)

都是通过父组件传递给子组件内容,然后子组件根据传递过来的内容来执行相应的行为

原文地址:https://www.cnblogs.com/Indomite/p/13264227.html