Vue父子传递实例讲解
实现功能：
1、子组件的input输入，改变父组件信息
2、父组件对子组件1，3进行监听与控制
3、子组件1与子组件3相互关联
父子双向通信流程：
子组件的input通过事件监听->控制子组件的data中变量/向父组件$emit子事件及变量
父组件监听到$emit事件及变量，赋予父组件的变量，通过props传到子组件
<body>
<div id = "app">
<!-- //将父组件num1的数据传给props中的pnumber1,实现父传子
//监听子组件num1change事件，这里recdnum1函数，没明白加括号出错 -->
<cnp
:pnumber1 = "num1"
:pnumber3 = "num3"
@num1change = "recdnum1"
@num3change="recdnum3" >
</cnp>
</div>
<!-- //template 编写自己的模版 -->
<template id = "mytemp">
<div>
<h3>props:{{pnumber1}}</h3>
<h3>child-data:{{dnumber1}}</h3>
<h3></h3>
<input type="text" :value="dnumber1" @input="num1input">
<h3>props:{{pnumber3}}</h3>
<h3>child-data:{{dnumber3}}</h3>
<input type="text" :value="dnumber3" @input="num3input">
</div>
</template>
<script>
var app = new Vue({
el:"#app",
data(){
return{
//父组件数据库中的默认数值
num1:11,
num3:31,
}
},
methods:{
//监听事件中，将子组件传来的dnumber1传给num1，num1传给pnumber1
recdnum1(value){
//默认传递来的value为String，根据需要转为Int或Float
this.num1 = parseInt(value);
},
recdnum3(value){
this.num3=parseFloat(value);
}
},
components: {
cnp:{
template:"#mytemp",
props: {
pnumber1:{
//默认props的数据格式和默认值
type:Number,
default:1
},
pnumber3:{
type:Number,
default:3
}
},
data(){
return{
//将props的数值赋予data中变量
dnumber1:this.pnumber1,
dnumber3:this.pnumber3
}
},
methods: {
num1input(event){
//将input中的数值传给dnumber1
this.dnumber1 = event.target.value;
//向父组件发射事件num1change,并传出dnumber1数据
this.$emit("num1change",this.dnumber1);
//绑定pnumber3数值的关联性
this.dnumber3=this.dnumber1*5;
//向父组件发射pnumber3信息
this.$emit("num3change",this.dnumber3);
},
num3input(event){
this.dnumber3 = event.target.value;
this.$emit("num3change",this.dnumber3)
},
}
}
}
});
</script>
</body>
以上就是相关的实例代码，希望小牛知识库整理的内容能够帮助到大家。
-
本文向大家介绍vue之父子组件间通信实例讲解(props、$ref、$emit)，包括了vue之父子组件间通信实例讲解(props、$ref、$emit)的使用技巧和注意事项，需要的朋友参考一下 组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。那么组件间如何通信，也就成为了vue中重点知识了。这篇文章将会通过props、$ref和
-
本文向大家介绍vue父组件点击触发子组件事件的实例讲解，包括了vue父组件点击触发子组件事件的实例讲解的使用技巧和注意事项，需要的朋友参考一下 最近在学习Vue父子组件通信的问题，刚好遇到一个父子之间事件事件派发与接收，在这里记录一下，在这里我使用的是ref 给子组件注册引用信息。官网是这样解释的 ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通
-
本文向大家介绍详解Vue之父子组件传值，包括了详解Vue之父子组件传值的使用技巧和注意事项，需要的朋友参考一下 一、简要介绍 父子组件之间的传值主要有三种：传递数值、传递方法、传递对象，主要是靠子组件的 props 属性来接收传值，下面分别介绍： （一）传递数值 1.子组件：Header.vue 可以看到，在子组件中的data对象里并没有 msg 属性，这里调用的是父类传递过来的 msg 属性，接
-
本文向大家介绍Vue父子组件之间的通信实例详解，包括了Vue父子组件之间的通信实例详解的使用技巧和注意事项，需要的朋友参考一下 在vue组件通信中其中最常见通信方式就是父子组件之中的通信，而父子组件的设定方式在不同情况下又各有不同。最常见的就是父组件为控制组件子组件为视图组件。父组件传递数据给子组件使用，遇到业务逻辑操作时子组件触发父组件的自定义事件。无论哪种组织方式父子组件的通信方式都是大同小
-
本文向大家介绍js的函数的按值传递参数(实例讲解)，包括了js的函数的按值传递参数(实例讲解)的使用技巧和注意事项，需要的朋友参考一下 js的函数传参的方式是按值传递，正常情况下，改变函数参数的值，并不会对函数外部的变量造成影响。例如： 这是因为js的函数在接收参数时，会生成一个副本变量，该副本变量等于参数的值，可以分析js这样运行的： 但是当函数的参数传递的是一个对象呢？ 发现函数内部居然改变了
-
本文向大家介绍详解vue父子组件间传值(props)，包括了详解vue父子组件间传值(props)的使用技巧和注意事项，需要的朋友参考一下 先定义一个子组件，在组件中注册props 在父组件中，引入子组件，并传入子组件内需要的值 这种方式只能由父向子传递，子组件不能更新父组件内的data 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。