vue 进阶之实现父子组件间的传值

2024-10-06 17:32:44

本章我们将深入了解一下组件，并实现父子组件间的传值。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
  <counter :count="count1"></counter>
  <counter :count="count2"></counter>
</div>
<script>
  Vue.component("counter", {
    props:['count'],
    data(){
      return{
        number: this.count,
      }
    },
    template: `
      <p>{{count}} {{number}}</p>
    `
  });
  var app = new Vue({
    el: '#app',
    data: {
      count1: 1,
      count2: 2,
    }
  })
</script>
</body>
</html>

结果如下：

上面的代码中我们定义了一个 counter 组件，并在 HTML 内插入了两次，分别通过 :count = "" 的方式将父组件内的 count1 和 count2 传入，然后我们在 counter 组件内通过 props 属性将 count 属性接住，这样我们就将父组件的值传递给了子组件。我们就可以在 template 的模板中将传过来的 count 数据插入，我们也可以在子组件的 data 内将传过来的 count 值赋值给一个新的变量 number。

如果从父组件传过来的值需要参与逻辑运算时我们推荐将传入的值重新赋值给一个变量，因为子组件不允许直接修改父组件传过来的值，我们可以将传入的值赋值给新的变量，然后将该变量再传给父组件来修改父组件的值。如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
  <counter :count="count1" @change="handleChange"></counter>
  <counter :count="count2" @change="handleChange"></counter>
  <p>{{total}}</p>
</div>
<script>
  Vue.component("counter", {
    props: ['count'],
    data() {
      return {
        number: this.count,
      }
    },
    methods: {
      handleClick() {
        this.number++;
        this.$emit('change', 1)
      }
    },
    template: `
      <p @click="handleClick">{{number}}</p>
    `
  });
  var app = new Vue({
    el: '#app',
    data: {
      count1: 1,
      count2: 2,
      total: 3,
    },
    methods: {
      handleChange(number) {
        this.total = this.total + number
      }
    }
  })
</script>
</body>
</html>

在以上代码中，我们在父组件中定义了一个 total 数据，初始值为 count1 + count2 的和。我们在子组件内定义了一个 handleClick() 的方法，让父组件传过来的 count 值每次都 +1，我们还在 handleClick() 的方法内定义了 this.emit( ′ change ′ ,1)的方法，它的意思是子组件通过 emit(′change′,1)的方法，它的意思是子组件通过emit 属性向外触发一个 change 事件，并且携带了一个参数 1，然后我们在 HTML 的 <counter> 标签内在父组件的 methods 属性内通过 handleChange() 方法监听这个 change 事件，即 @change 和 $emit 的事件名称自己定义，只要名称一致即可。在 handleChange() 方法内接收从子组件通过 change 事件传过来的参数 1，让后让 total 数据加上这个参数 1 即可实现一个简单的累加计算。

以上便是子组件向父组件传值的过程，结果如下：

从上面的例子我们已经实现了父子组件间的相互传值，是通过 change 事件将每次累加的数值 1 传给父组件，通过数据的方式修改 total 值，Vue 官方建议我们尽量通过数据的方式而不是操作 DOM 的方式来实现操作，但是在极端条件下我们必须要操作 DOM 来实现，Vue 也为我们提供操作 DOM 的方法，如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
  <counter :count="count1" @change="handleChange" ref="one"></counter>
  <counter :count="count2" @change="handleChange" ref="two"></counter>
  <p>{{total}}</p>
</div>
<script>
  Vue.component("counter", {
    props: ['count'],
    data() {
      return {
        number: this.count,
      }
    },
    methods: {
      handleClick() {
        this.number++;
        this.$emit('change')
      }
    },
    template: `
      <p @click="handleClick">{{number}}</p>
    `
  });
  var app = new Vue({
    el: '#app',
    data: {
      count1: 1,
      count2: 2,
      total: 3,
    },
    methods: {
      handleChange() {
        console.log(this.$refs.one);
        console.log(this.$refs.two);
        this.total = this.$refs.one.number + this.$refs.two.number;
      }
    }
  })
</script>
</body>
</html>

上面的代码中，我们并没有通过 $emit 里的 change 事件传值给父组件，而是在 <coute> 标签内分别定义了 ref="one" 和 ref="two" 属性，并且在 handleChange() 方法内通过监听子组件的 change 改变时打印一下这两个 ref 内的值，控制台的输出日志如下：

里面既包含了 $el 的 DOM，还有初始值 count=1 即handleClick() 方法执行后 number=2 的值，所以我们可以拿到 number 的值，让两个 number 相加即为 total 的值。

在 vue 中我们还是建议通过数据来操作而不是通过 DOM 来执行操作。

总结

以上所述是小编给大家介绍的vue 进阶之实现父子组件间的传值,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

浅谈Vue父子组件和非父子组件传值问题

本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue <template> <div class='tmpl'> goodsList组件 </div> </template> <style> </style> <script> export default { data() { return{} }, creat
vue中父子组件注意事项,传值及slot应用技巧

一.父子组件传值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父子组件传值</title> <style> </style> <script src="./vue.js"></script> </head> <bod
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)

Vue2.0 传值方式: 在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来.这时必然会产生一些疑问和需求?比如一个组件调用另一个组件作为自己的子组件,那么我们如何进行给子组件进行传值呢?如果是电商网站系统的开发,还会涉及到购物车的选项,这时候就会涉及到非父子组件传值的情况.当然你也可以用Vuex状态管理工具来实现,这部分我们后续会单独介绍.我先给大家介绍Vue开发中常用的三种传值方式. Vue常用的三种传值方式有: •父传子 •子传父 •非父子传值引
vue单页开发父子组件传值思路详解

vue单页开发时经常需要父子组件之间传值,自己用过但是不是很熟练,这里我抽空整理了一下思路,写写自己的总结. GitHub地址:https://github.com/leileibrother/wechat-vue 文件目录如下图,example.vue是父组件,exampleChild.vue是子组件. 父组件引入子组件,父组件html的代码如下: <template> <div> <h3>这是父组件</h3> <p style="marg
详解vue父子组件间传值(props)

先定义一个子组件,在组件中注册props <template> <div> <div>{{message}}(子组件)</div> </div> </template> <script> export default { props: { message: String //定义传值的类型<br> } } </script> <style> </style> 在父组件中,引入
Vue父子组件双向绑定传值的实现方法

父子组件之间的双向绑定非常简单,但是很多人因为是从Vue 2+开始使用的,可能不知道如何双向绑定,当然最简单的双向绑定(单文件中)就是表单元素的 v-model 了,例如 <input type="text" /> 它会响应表单元素的 value 属性,当输入框文本改变时,会将 value 值传给 v-model 所绑定的变量,如果同时设置 v-model 和 value , value 属性无效. 父子组件的自定义双向 v-model 当若干dom封装成组件时,在父组件中
Vue父子模版传值及组件传值的三种方法

这里是针对于vue1.0,如果要学2.0,建议大家去看官方文档 vue2.0 http://vuefe.cn/guide/ vue-router2.0https://router.vuejs.org/zh-cn/essentials/getting-started.html 第一种 <div id="example"> <my-component></my-component> </div> <script src="..
vue2.0 子组件改变props值,并向父组件传值的方法

为什么我们会有修改 prop 中数据的冲动呢?通常是这两种原因: prop 作为初始值传入后,子组件想把它当作局部数据来用: prop 作为初始值传入,由子组件处理成其它数据输出. 对这两种原因,正确的应对方式是: 定义一个局部变量,并用 prop 的值初始化它: props: ['initialCounter'], data: function () { return { counter: this.initialCounter } } 定义一个计算属性,处理 prop 的值并返回. prop
vue 进阶之实现父子组件间的传值

本章我们将深入了解一下组件,并实现父子组件间的传值. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head&g
vue3 父子组件间相互传值方式

目录 vue3父子组件相互传值父向子传值子组件向父组件传值 vue3父子组件传值的注意事项解决办法:两种 vue3父子组件相互传值父向子传值父 <pie-chart :pieData="post_data.pid" /> 父组件只需在子组件上声明一个变量即可. :代表变量,可以传变量;否则只能传常量子 export default { props:['pieData'], setup(props,ctx) { const pie_
React父子组件间的传值的方法

父组件向子组件传值: 父组件: import React, { Component } from 'react'; import Child from './chlid'; class parent extends Component{ constructor(props) { super(props); this.state = { txt0:"默认值0", txt1:"默认值1" } } componentDidMount(){ } parToson(){ th
vue之父子组件间通信实例讲解(props、$ref、$emit)

组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.那么组件间如何通信,也就成为了vue中重点知识了.这篇文章将会通过props.$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信. 在说如何实现通信之前,我们先来建两个组件father.vue和child.vue作为示例的基础. //父组件 <template> <div> <h1>我是父组件!</h1> <child>
vue.js使用v-model实现父子组件间的双向通信示例

本文实例讲述了vue.js使用v-model实现父子组件间的双向通信.分享给大家供大家参考,具体如下: <template> <div> 这是主页面 <h1> {{num}}</h1> <button @click="handleMins">-1</button> <hr>  <com
vue父子组件间引用之$parent、$children

vue中提到[父子组件],则一定会想到我们常用的父子组件通信:props+$on().$emit() ,如图: 也就是说,虽然在一般情况下,子组件是不能引用父组件或者Vue实例的数据,但是对于在开发中出现的"数据需要在组件中来回传递",我们最简单的解决办法就是通过props(和v-on)将数据从父组件传到子组件,再用$emit将数据从子组件传到父组件,以此循环引用. 但是在另一些场景下,我们可能想要比如(在父组件中)拿到子组件对象,然后直接操作其中数据,去实现一些功能,比如方法的调用.
浅谈Vue2.0父子组件间事件派发机制

从vue1.x过来的都知道,在vue2.0中,父子组件间事件通信的$dispatch和$broadcase被移除了.官方考虑是基于组件树结构的事件流方式实在是让人难以理解,并且在组件结构扩展的过程中会变得越来越脆落.特别是在组件层级比较深的情况下.通过广播和事件分发的机制,就显得比较混乱了. 官方在废除的同时,也为我们提供了替换方案,包括实例化一个空的vue实例,使用$emit反应子组件上的状态变化 1.使用$emit触发事件 helloWorld.vue作为父组件,dialogConfigVi
vue2.0父子组件间传递数据的方法

关于父子组件之间传递数据其实文档上都说得很明白. 但是如果完全不懂的人做计也看不懂,下面是一个小例子,有两个文件 1.parent.vue <template> <child :child-msg="msg" @ok="event"></child> </template> <script> import child from './child.vue'; export default { data(){
React生命周期与父子组件间通信知识点详细讲解

目录声明周期声明周期解析生命周期函数 Constructor componentDidMount componentDidUpdate componentWillUnmount 不常用的生命周期函数认识组件间的通信参数propTypes 限制单个元素默认 Prop 值对于函数式组件子组件传递父组件声明周期很多的事物都有从创建到销毁的整个过程,这个过程称之为是生命周期: React组件也有自己的生命周期,了解组件的生命周期可以让我们在最合适的地方完成自己想要的功能: 生命周期和
Vue $emit $refs子父组件间方法的调用实例

1.$emit 子组件调用父组件的方法并传递数据注意:子组件标签中的时间也不区分大小写要用"-"隔开子组件: <template> <button @click="emitEvent">点击我</button> </template> <script> export default { data() { return { msg: "我是子组件中的数据" } }, methods:

vue 进阶之实现父子组件间的传值

相关推荐

随机推荐