大一菜鸟的vue学习之路（四）组件通信-父子

本文已参与「新人创作礼」活动， 一起开启掘金创作之路。

组件间通信

父子组件之间通信方式

• 父组件传递给子组件：通过props属性

  • 在组件上注册一些自定义的attribute

  • 父组件给这些attribute赋值，子组件通过attribute的名称获取到对应的值。

  • 写法：

    • 数组：props:['xxx','xxx']

      • 不能对类型进行验证
      • 没有默认值

    • 对象：tpye,default,require（或者自定义验证函数）

      • props:{
        name:{
        type:String,
        default:"默认name"
        },
        }
        

    • 对象类型写默认值，要编写default函数，返回默认值

    • 可限制类型

      • String
      • Number
      • Boolen
      • Array
      • Object
      • Date
      • Fuction
      • Symbol

  • Prop的大小写命名~驼峰或“-”

• 非prop的Atteibute

  • 当我们传递给一个组件某个属性，但是该属性并没有定义对应的props 或者 emits时，就称之为 非props的attribute
  • 常见的包括class、style、id属性
  • 当组件有单个根节点时，非prop的attribute将自动添加到根节点的attribute中
  • 禁止继承inheritAttrs：false
  • $attrs.adress 获取非prop的attribute
  • 多个根节点，需要手动绑定$attrs

• 子组件传递给父组件：通过$emit触发事件

  • $emit(“自定义事件名称”,传递的参数)

    • 在子组件中定义好某些情况触发的事件名称this.$emit
    • 在父组件中以v-on（@）的方式传入要监听的事件名称，并绑定到对应的方法中去
    • 在子组件触发相应事件时，根据事件名称触发对应的事件

  • emits:[] 存放所有自定义事件

插槽Slot

• Show-message

  • <template>
     <h2>{{title}}</h2>
     <div class=""conent>
         <slot></slot>
     </div>
    </template>
    

• APP

  • <show-message title="haha">
        <button>我是按钮元素</button>
    </show-message>
    
    <show-message >
        <a herf="#">baidu</a>
    </show-message>
    

• 若没有传东西，显示默认内容

  • <slot>
        <h2>默认内容</h2>
    </slot>
    

• 多个插槽--具名插槽

  • 特殊的属性name，可以给插槽起名字

  • 一个不带name的slot，会带有隐藏的名字default

  • 使用v-slot:名字

  • 动态插槽名

    • v-solt:[变量]
    • 缩写：#

渲染作用域

• 父级模板里的所有内容都是在父级作用域中编译的

• 子模板里的所有内容都是在子作用域中编译的

插槽作用域

//子件内部插槽
<slot :item="item">
    <span>{{item}}</span>//不写死
</slot>
//父
<...>
   <template v-solt:defult="props">
     <button>{{props.item}}</button>
   ...
<...>