vue父组件和子组件之间的高级实现值传递

在本章中，我们将深入了解组件，实现父组件和子组件之间的价值传递。

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title vue/title script src=' http :3359 cdn . jsdeliver . net/NPM/vue '/script/head dydiv id=' app ' counter : count=' count 1 '/counter counter : count=' count 2 '/counter/div script vue.component(' counter '，{ prop 3360[' count ']，data(){ return { 0var app=newvue ({el:' # app '，data: {count1: 1，count2: 2，})/script/body/html的结果如下：

在上面的代码中，我们定义了一个计数器组件，并在HTML中插入了两次，通过：count=' '，传入了父组件中的count1和count2，然后通过props属性捕获了计数器组件中的count属性，这样就把父组件的值传递给了子组件。我们可以将传输的计数数据插入模板的模板中，或者将传输的计数值分配给子组件数据中的一个新的变量编号。

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

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title vue/title script src=' http :3359 cdn . jsdeliver . net/NPM/vue '/script/head dydiv id=' app '计数器： count=' count 1 ' @ change=' handleChange '/计数器： count=' count 2 ' @ change=' handleChange '/计数器p{{total}}/p/divscript Vue。这个。$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 number } } })/script/body/html在上面的代码中，我们在父组件中定义了一个总计数据，初始值是count1 count2的和。我们在子组件中定义了handleClick()方法，这样父组件每次传输的计数值就是1。我们还在handleClick()方法中定义了this.emit(' change '，1)方法，这意味着子组件传递emit(' change '，1)方法。意思是子组件通过emit属性触发一个change事件，并携带一个参数1，然后我们在HTML的counter标签中通过父组件的methods属性中的handleChange()方法来监听这个change事件，也就是说@change和$emit的事件名称都是我们自己定义的，只要名称一致即可。在handleChange()方法中，通过Change事件从子组件接收参数1，然后将该参数1添加到总数据中，实现简单的累加计算。

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

从上面的例子中，我们已经实现了父组件和子组件之间的相互值传递，即每次累加的值1通过变更事件传递给父组件，总值通过数据进行修改。官方Vue建议我们尽量通过数据来实现操作，而不是DOM操作，但是在极端情况下，必须要操作DOM才能实现，Vue也给我们提供了操作DOM的方法，如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title vue/title script src=' http :3359 cdn . jsdeliver . net/NPM/vue '/script/head dydiv id=' app ' counter : count=' count 1 ' @ change=' handleChange ' ref=' one '/counter counter : count=' count 2 ' @ change=' handleChange ' ref=' two '/counter p { { total这个。$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(这。$ refs . two)；total=这个。this .给这个编号。$ refs . two . number；}} })/script/body/html在上面的代码中，我们没有通过$emit中的change事件将值传递给父组件，而是在coute标记中定义了属性ref='one '和ref='two '，并通过监视handleChange()方法中子组件的变化来打印这两个refs中的值。控制台的输出日志如下：

它包含$el的DOM和初值count=1，也就是handleClick()方法执行后number的值=2，这样我们就可以得到number的值，这样两个数的和就是total的值。

在vue中，我们仍然建议通过数据而不是DOM进行操作。

摘要

以上就是边肖介绍的vue高级实现的父子组件之间的价值传递。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！