vue组件传值、emit、v-model、ref、provide、inject、attrs

最新推荐文章于 2024-05-16 07:18:45 发布
最新推荐文章于 2024-05-16 07:18:45 发布
阅读量382 收藏 1
点赞数
文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40283749/article/details/122437694
版权

总结:
1.子组件$emit抛出 父组件响应

父组件

<template>
  <div>
    <Son :parentsData="num" @updateParents="changeNum" />
  </div>
</template>

<script>
import Son from "./text.vue";
export default {
  data() {
    return {
      num: 0,
    };
  },
  components: {
    Son,
  },
  methods: {
    changeNum(params) {
      this.num = params;
    },
  },
};
</script>

<style  scoped>
div {
  padding: 50px;
}
</style>

子组件

<template>
  <div>
    {{ parentsData }}

    <button @click="add">加1</button>
  </div>
</template>

<script>
export default {
  props: {
    parentsData: {
      type: Number,
    },
  },
  methods: {
    add() {
      this.$emit("updateParents", 1);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

2.父组件xx.sync="xx"也是双向绑定 子组件$emit('update:xx')抛出 语法糖

父组件语法糖写法

<template>
  <div>
    <Son :parentsData.sync="num"  />
  </div>
</template>

<script>
import Son from "./text.vue";
export default {
  data() {
    return {
      num: 0,
    };
  },
  components: {
    Son,
  },
  methods: {
    // changeNum(params) {
    //   this.num = params;
    // },
  },
};
</script>

<style  scoped>
div {
  padding: 50px;
}
</style>

子组件语法糖写法

<template>
  <div>
    {{ parentsData }}

    <button @click="add">加1</button>
  </div>
</template>

<script>
export default {
  props: {
    parentsData: {
      type: Number,
    },
  },
  methods: {
    add() {
      this.$emit("update:parentsData", 1);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

不使用语法糖

父组件

<template>
  <div>
    <Son :parentsData.sync="num" @changeNum="(e) => (num = e)" />
  </div>
</template>

<script>
import Son from "./text.vue";
export default {
  data() {
    return {
      num: 0,
    };
  },
  components: {
    Son,
  },
  methods: {
    // changeNum(params) {
    //   this.num = params;
    // },
  },
};
</script>

<style  scoped>
div {
  padding: 50px;
}
</style>

子组件

<template>
  <div>
    {{ parentsData }}

    <button @click="add">加1</button>
  </div>
</template>

<script>
export default {
  props: {
    parentsData: {
      type: Number,
    },
  },
  methods: {
    add() {
      this.$emit("changeNum", 1);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>


3.父组件v-model响应 子组件抛出input事件 接收value参数 可以通过model参数配置响应事件与接收参数
父组件

<template>
  <div>
    <Son v-model="num" />
  </div>
</template>

<script>
import Son from "./text.vue";
export default {
  data() {
    return {
      num: 0,
    };
  },
  components: {
    Son,
  },
  methods: {

  },
};
</script>

<style  scoped>
div {
  padding: 50px;
}
</style>

子组件   定义model  vue3.0model内key有改变

<template>
  <div>
    {{ num }}

    <button @click="add">加1</button>
  </div>
</template>

<script>
export default {
  props: {
    num: {
      type: Number,
    },
  },
  model:{
    prop:"num",
    event:"changeNum"
  },
  mounted(){
    console.log(this.num);
  },
  methods: {
    add() {
      this.$emit("changeNum", 1);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

另一种写法

父组件

<template>
  <div>
    <Son v-model="num" @input="(e) => (num = e)" />
// @input="(e) => (num = e)"  可以不用加上input也能生效
  </div>
</template>

<script>
import Son from "./text.vue";
export default {
  data() {
    return {
      num: 0,
    };
  },
  components: {
    Son,
  },
  methods: {

  },
};
</script>

<style  scoped>
div {
  padding: 50px;
}
</style>

子组件、只能用value接收父传来参数

<template>
  <div>
    {{ value }}

    <button @click="add">加1</button>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
    },
  },
  mounted() {
    console.log(this.num);
  },
  methods: {
    add() {
      this.$emit("input", 1);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

4.parents访问父组件实例，官方文档建议谨慎使用，看个人需求

父组件

<template>
  <div>
    <Son :parentsNum="num" />
  </div>
</template>

<script>
import Son from "./text.vue";
export default {
  data() {
    return {
      num: 0,
    };
  },
  components: {
    Son,
  },
  methods: {
    changeNum() {
      this.num++;
    },
  },
};
</script>

<style  scoped>
div {
  padding: 50px;
}
</style>

子组件

<template>
  <div>
    {{ parentsNum }}

    <button @click="add">加1</button>
  </div>
</template>

<script>
export default {
  props: {
    parentsNum: {
      type: Number,
    },
  },
  methods: {
    add() {
      this.$parent.changeNum()
    },
  },
};
</script>

<style lang="scss" scoped>
</style>


5.通过provide inject传递函数与参数

父组件   重点：传递的对象在有响应式，否则子组件没有响应式

<template>
  <div>
    <Son />
  </div>
</template>

<script>
import Son from "./text.vue";
export default {
  data() {
    return {
      obj: {
        num: 0,
      },
    };
  },
  provide() {
    return {
      _parents: this,
      obj: this.obj,
      changeNum: this.changeNum,
    };
  },
  components: {
    Son,
  },
  methods: {
    changeNum() {
      this.obj.num++;
    },
  },
};
</script>

<style  scoped>
div {
  padding: 50px;
}
</style>

子组件

<template>
  <div>
    {{ obj.num }}
    <button @click="add">加1</button>
  </div>
</template>

<script>
export default {
  inject: ["obj", "changeNum", "_parents"],
  mounted() {
    console.log(this._parents);//拿到父组件实例，单页面应用控制某些状态
  },
  methods: {
    add() {
      this.changeNum();
    },
  },
};
</script>

<style lang="scss" scoped>
</style>


5.通过ref来获取组件实例，ref不能再template上使用，compute也不能用
父组件 在搜索参数触发子组件方法

<template>
  <div>
    <Son ref="sonModule" />
  </div>
</template>

<script>
import Son from "./text.vue";
export default {
  components: {
    Son,
  },
  mounted() {
    this.$refs.sonModule.add();
  },
};
</script>

<style  scoped>
div {
  padding: 50px;
}
</style>

子组件

<template>
  <div>
    {{ num }}
    <button @click="add">加1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    add() {
      this.num++;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>


6.可以通过扩展函数在原型上绑定广播/派发这个是在1.0中有的，但是2.0去除了，原理就是通过$children $parent循环emit事件
7.重新创建一个实例实现eventBus事件总线 原理为在新的实例上通过$on $emit传递与响应
8.传递参数时可以用v-bind/$attrs传递  传递函数可以用v-on/$listeners

父组件  

<template>
  <div>
    {{ num }}
    <Son :parentsNum="num" :parentsName="name" @parentsEvent="changeNum" />
  </div>
</template>

<script>
import Son from "./text.vue";
export default {
  data() {
    return {
      num: 0,
      name: "baby",
    };
  },
  components: {
    Son,
  },
  methods: {
    changeNum(params) {
      this.num = params;
    },
  },
};
</script>

<style  scoped>
div {
  padding: 50px;
}
</style>

子组件   

$attrs内部值被prios接收，则值被存到$props内部，没有被props接收，则存在$attrs内部，子组件内部把$attrs赋值给孙子组件该值会一直传递

$listeners不受影响

<template>
  <div>
    {{ parentsNum }}
    <button v-on="$listeners" @click="add">孩子组件传递加1</button>
    <Child v-bind="$attrs" v-on="$listeners" />
  </div>
</template>

<script>
import Child from "./child.vue";
export default {
  //这里接收了一个props,当前实例里$attrs只剩下boby
  //$listeners会一直随着传递下去
  props: {
    parentsNum: {
      type: Number,
    },
  },
  components: {
    Child,
  },
  mounted() {
    console.log(this.$attrs);
  },
  methods: {
    add() {
      this.$emit("parentsEvent", 456);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

孙子组件

<template>
  <div>
    <button v-on="$listeners" @click="add">孙子组件传递加1</button>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$attrs, "child");
    console.log(this, "child");
  },
  methods: {
    add() {
      this.$emit("parentsEvent", 132);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>


不建议用$parent/$children 以及组件派发/广播，dispatch1.0是有得，2.0就没有了，因为这样结构不清晰

寂寞沙洲冷1号选手
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 关于父子组件传值的方法-$emit/v-model
GreenHand_000的博客
12-06 266
vue 关于父子组件传值的方法
Vue组件通信$attrs、$listeners实现原理解析
10-14
在开发过程中，组件间的通信是必不可少的，Vue 提供了多种通信机制，如 props、事件 emit、Vuex、Event Bus 以及 provide/inject 等。在这些机制中，`$attrs` 和 `$listeners` 是一种相对隐式且灵活的通信方式，它们...
vue自定义组件使用$attrs和$listeners，正确传递属性和v-model的值
weixin_42471170的博客
07-11 761
/* @Description: @Author: hyh @Date: 2021-07-11 18:46:00 @LastEditTime: 2021-07-11 18:46:00 @LastEditors: hyh */ export default { inheritAttrs: true, props: { value: String }, data() { return { list: [] } }, methods: {}, computed: {}, watch:
Web前端开发之VUE09——emits节点、组件上的v-model
DRLDER的博客
04-16 882
目录 emits节点： 组件上使用v-model： emits节点： 在之前的我们学习过$emit的事件触发，也就是自定义事件，前期代码： html: <button @click.stop="event_click">+</button> script: event_select(){ this.$emit('itemSelected')//传递自定义事件，参数包括事件名，多传递参数。 } 父级： @itemSelected="方法"//响应事件
Vue组合式API---provide和inject跨层传递数据示例
最新发布
听海边涛声
05-16 447
Vue组合式API---provide和inject跨层传递数据示例
v-model语法糖，ref和$refs(vue操作dom)，$nextTick使用，dynamic动态组件，自定义指令
GW05431的博客
12-03 1053
v-model本质上是 value属性和input事件的一层包装v-model的作用：提供数据的双向绑定数据发生了改变，页面会自动变 v-bind:value页面输入改变 ， 数据会自动变化 v-on:inputv-model是语法糖， v-model等价于 给一个input框提供了 :value属性以及 @input事件很显然如果每次使用input框，都需要提供value和input事件，比较麻烦，所以使用v-model我们经常遇到一种场景：父组件提供一个数据给子组件使用（父传子）子组件又需要修改父组件传
v-model和ref获取数据的不同之处
m0_61004873的博客
09-18 1819
v-model和ref获取数据的不同之处
vue组件之间通信方式实例总结【8种方式】
10-17
- Vue的`provide`和`inject`选项允许祖先组件向其所有后代组件提供数据，而不必通过中间组件。祖先组件提供数据，后代组件通过`inject`选项注入数据。 5. **Event Bus（事件总线）** - 创建一个全局的Vue实例作为...
vue组件间通信六种方式（总结篇）
10-17
Vue.js 的组件化设计是其强大之处，但同时也带来了组件间通信的挑战。由于每个组件都有自己的作用域，因此需要特定的方法来实现数据共享。本篇文章将详细介绍 Vue 组件间通信的六种主要方式，并通过实例解析它们的...
Vue.js 父子组件通信的十种方式
10-17
这是Vue推荐的父子组件通信方式，即通过props将数据从父组件传递给子组件，通过子组件的`$emit`事件将数据回传给父组件。 9. **Ref属性** Vue中的`ref`属性可以用来获取子组件的实例，从而直接访问其方法和数据。...
vue中v-model的双向绑定原理及$emit(“input“)的使用
weixin_50367873的博客
11-14 5224
vue 再父子组件传值时，除了传统的父组件 ：属性去传值外，还可以使用 父组件v-model传值，子组件props[‘value’]接收，而子组件也可以通过$emit(‘input’,false)，去改变父组件中v-model 和 子组件中 value 的值 。 v-model本质上是一个语法糖。如下代码本质上是<input :value=“test” @input=“test = $event.target.value”>，其中@input是对输入事件的一个监听:value="test"是
element ui this.$parents和this.$emit的坑
qq_43632291的博客
03-08 771
element ui在dialog这些组件中再使用自定义组件的话，这两个方法是无效的，因为dialog外还有多层的父组件，想要调用就查看一下this.parents有多少个父组件就加几个this.parents有多少个父组件就加几个this.parents有多少个父组件就加几个this.parents 或者使用vuex或者其他全部变量的方法。。。。 ...
Vue中快速浏览页面以及父子组件的传值(props、$parent和$emit)
qq_43378800的博客
08-27 1711
1.如何在不搭建脚手架的情况下,写一个vue后缀的文件,然后浏览呢? 先安装一个全局的快速原型开发的功能 npm install -g @vue/cli-service-global 然后在需要浏览的文件中在终端中打开,输入vue serve 2.父子组件的传值 a.父传子 关键字: props 子组件定义 props属性 props:['num','age'.....] 父组件使用子组件...
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 3919
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
Vue- v-model 表单 数据双向绑定（$emit）
前端Cocoko
06-30 2783
一、v-model： v-model是一个指令，限制在 input、select、textarea、components 中使用。 Vue 的父子组件通讯模式，父组件通过 prop 把数据传递到子组件，子组件修改了数据后把改变通过 $emit 事件的方式通知父组件，所以说组件上的 v-model 也是一种语法糖。 官网方法： v-model只不过是一个语法糖而已,真正的实现靠的还是 : v-b...
Vue2 ，v-model，以及利用 v-model 实现组件props双向绑定的解决方案
热门推荐
github_39598787的博客
05-23 2万+
一、v-model？ https://segmentfault.com/a/1190000009492595   v-model 其实是一个语法糖，这背后其实做了两个操作 v-bind 绑定一个 value 属性 v-on 指令给当前元素绑定 input 事件 在原生表单元素中 &lt;input v-model='something'&gt; 就相当于 &lt...
浅谈vue中provide和inject 用法
weixin_34007879的博客
03-25 2189
provide：Object | () => Object inject：Array | { [key: string]: string | Symbol | Object } provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。是2.2.0版本 新增的。 这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，...
vue3如何进行组件传值
05-30
4. $attrs / $listeners：在Vue 3中，父组件通过v-bind="$attrs"将非props属性传递给子组件，在子组件中可以通过$vnode.data.attrs获取这些属性。同时，父组件通过v-on="$listeners"将非原生事件传递给子组件，在子...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值