vue2组件通信方式

Strom
281 阅读2分钟

组件传参

一.子父组件通讯

方法1:prop传参=>用于父传子

  1. 父组件使用自定义属性的方法定义要传递的数据

    • :自定义属性名="属性值"

  2. 子组件用props进行接收数据

    1. 可以使用props对象的形式接收

      props:{
    父组件定义的属性名:{
		type:数据类型,
        required:是否必传,
        default:默认值
    }
}

    2. 可以使用数组的方式进行接收

      props:["父组件传递过来的属性名"...]
方法2:$emit=>用于子传父

  1. 在子组件中定义一个方法

    <button @click="btn">是兄弟就砍我一刀</button>
    • 在$emit中可以进行参数的传递
    methods: {
        btn(){
            // 语法:this.$emit(自定义事件名,参数1,参数2)
            this.$emit('updataPrice',this.obj.id)
    }
}

  2. 在父组件中子组件触发父组件的自定义事件

    • 注意:不要写(),如果写()会覆盖掉子组件中传递过来的参数
    <子组件 @updataPrice=updataPriceFn> </子组件>
方法3:.sync 修饰符
  1. 父组件自定义属性后面加上.sync 修饰符
    • :自定义属性名.sync="属性值"
  2. 子组件中进行接收方式不变,依旧使用prop进行接收
  3. 使用.sync可以在子组件中通过方法修改父组件中传递过来的值
    • this.$emit('update:父组件的属性名', newVal)

.sync只作为emit的语法糖,用emit的语法糖,用emit一样可以实现更改父组件中参数的效果

方法4:v-model传参

  1. 在父组件中通过v-model="属性值进行传参"

    • <子组件 v-model="属性值"></子组件>

  2. 在子组件中通过value进行接收,通过model 进行对value名的修改

    • props: {
   value: { type: Boolean, required: true}
 }
// 通过model.prop修改接收的变量名称
model{
    prop:showDialog  // 修改默认的value
    event:xianshi   // 修改默认的input
},
props: {
   showDialog: { type: Boolean, required: true}
 }

  3. 可以在子组件中通过input进行数据的修改

    • close() {this.$emit('input' ,false)}
  • 可以把v-model理解为model的prop为value, event为input的一种特殊情况
v-model和.sync的区别
  • v-model是专门为文本设计的语法糖,可以直接在input标签上用,能对父组件的值进行修改-->因为默认监听了input事件和props的value字段 v-model更专注于表单的绑定
  • .sync是自定义事件 update的语法糖
  • 在vue2中v-model只能使用一次,但是.sync却可以多次使用
方法5:attrs和attrs和listeners
  • $attrs 是父组件传递过来的,但是子组件没用prop接收的参数
  • $listeners 是父组件中v-on事件监听器
  • 可以理解为$attrs和$listeners 是两个收纳箱,一个收纳父组件属性,一个收纳父组件方法,并且都已对象的形式进行保存,使用时直接. 语法调用即可
方法6:本地缓存交互

利用sessionStorage,localStorage,Cookies 进行数据本地存储

方法7:vuex进行数据存储
  • vuex是vue的状态管理工具 可以分为5个模块,主要使用state存储数据,和mutations设置数据
方法8:parent和parent和children
  • 使用有条件限制
方法9:ref获取组件,可以调用子组件中的方法和数据的获取
方法10: 组件插槽传参

  • 使用具名插槽配合作用域进行传参

    • 子组件插槽中使用自定义属性的方法定义参数
    <slot :row="defaultObj" name="pannel">{{ defaultObj.defaultOne }}</slot>
    • 父组件中,使用`v-slot:插槽名=自定义参数值名
    • 自定义参数名中包括 所有子组件中传递过来的参数的集合,可以使用. 语法的形式获取使用参数
    <template v-slot:pannel="scope">
          <p>{{ scope.row.defaultTwo }}</p>
</template>
方法11:provide&inject 配合使用
  • 这种方法只能配合使用 在父组件中暴露导出自己
avatar
文章
阅读
粉丝