Vue 小知识点汇总

插槽slot

如何使用slot的同时传数据(v-slot:name="value")

• situation: 父页面是一个列表,拿到数据之后循环给card子组件, 每个card要根据拿到的数据中的字段来判断显示的按钮.

• action: 子组件留插槽,并把拿到的数据在插槽里传出去. 父页面根据当前插槽的数据在template里面做判断
  子组件child.vue

// 此处 detail是当前card拿到的数据, data是对外传出的属性名,都可自定义命名
<slot name="buttons" :data="detail"></slot>

父页面

<child v-for="(item, index) in list" :key="index">
    <template v-slot:buttons="scope" >
        {{scope.data}}
    </template>
</child>

父子组件传参相关

接受emit事件传参的几种方法 (空, $event,augrments)

子组件 child.vue

change( ){
this.$emit('change',param1,param2) // 方法名, 参数1, 参数2
}

父组件

// 方法1 方法名后不跟参数
<child @change="handlehange"> 
// 此时在method里写handleChange(a,b)函数,a,b就是参数1和参数2

// 方法2  通过$event传第一个参数,可用于混合传参,即既接受子组件的参数,又接受父组件的参数
<child @change="handlehange('test',$event)"> 
// 此时在method里写handleChange(a,b)函数,a,b就是'test'和参数1

// 方法3  通过argument传参数数组,可用于混合传参,
<child @change="handlehange('test',argument)"> 
// 此时在method里写handleChange(a,b)函数,a,b就是'test'和参数1参数2的数组