父子组件间的传值

父子组件间通信

父组件-->子组件

1.父组件通过给子组件添加属性给子组件传值,子组件通过props来接受。

2但是要在属性前加“:”,即使用v-bind指令,才能使属性值是js代码,不然就是字符串。

3.单项输出流。即子组件不允许修改父组件传递的值,只能使用,不能修改。

父组件通过属性向子组件传值时,如果传递的是引用型的值,这时候子组件对父组件传递的值进行修改可能会影响其他子组件对这个引用类型值的使用。

解决办法:子组件在data项中新赋值父组件的变量,操作新的变量即可。

子组件-->父组件

通过事件this.$emit(‘方法名‘,参数)

父组件监听子组件传递的事件 @事件名

<body>
<div id="root">
<counter :count="3" @inc="handleIncrease"></counter>
<counter :count="2" @inc="handleIncrease"></counter>
<div>{{total}}</div>
</div>
<script>
var counter={
props:[‘count‘],
data:function(){
return {
number:this.count
}
},
template:‘<div @click="handleClick">{{number}}</div>‘,
methods:{
handleClick:function(){
this.number=this.number+2;
this.$emit(‘inc‘,2)

}
}
}

var vm=new Vue({
el:‘#root‘,
data:{
total:5
},
components:{
counter:counter
},
methods:{
handleIncrease:function(step){
this.total+=step
}

}
})
</script>

</body>

原文地址:https://www.cnblogs.com/tengteng0520/p/12067048.html

时间: 2024-10-04 05:09:37

父子组件间的传值的相关文章

非父子组件间的传值

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>非父子组件间的传值(Bus/总线/发布订阅模式/观察者模式)</title> <script src="./vue.js"></script> </head> <body> <div

vue的父子组件间传值以及非父子间传值

Vue组件间的传值方式: 父传子 子传父 非父子间传值 1.首先父组件传值给子组件,使用bind绑定属性,然后在子组件用props接收属性值. //父组件 <template> <input type="text" /> <br/> <child :inputValue="inputValue"></child> </template> <script> import child f

非父子组件间传值(一)

非父子组件间传值有两种方法,一种是vuex共享数据,另一种是发布订阅模式/观察者模式/总线/Bus.这篇随笔主要总结总线机制的学习心得: 首先通过在Vue.prototype上挂载一个bus属性,指向vue实例:接下来在调用Vue或者创建组件时都会有bus属性. Vue.prototype.bus=new Vue() var Child={ props:['content'], data:function() { return {num:this.content} }, //因为vue是单项数据

第四节:Vue表单标签和组件的基本用法,父子组件间的通信

vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script> </head> <body> <div id="app"&

Angular中父子组件双向绑定传值

下面为大家展示一个较为简单的ng父子组件双向绑定传值,下面是父组件页面 这个页面的大概功能就是父组件(红色)通过输入框输入内容反映到子组件上进行展示,并且进行了投影, 子组件(橙黄色)通过Input输入框输入内容反映到父组件上,并且使用了@Output传值给父组件 下面是父组件的页面 父组件ts 子组件页面 子组件ts 我主要来说下需要注意的几个地方,第一个就是当我利用子组件的@Output发射数据给父组件的时候, import { EventEmitter } from '@angular/c

Vue入门七、父子组件间通讯

一.父子组件通讯 父传子:1.父用子的时候通过属性传递2.子要声明props:['属性名']接收3.子组件template中直接用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="

Vue 组件间的传值(通讯)

组件之间的通讯分为三种 父给子传 子给父传 兄弟组件之间的通讯 1 父组件给子组件传值 子组件嵌套在父组件内部,父组件给子组件传递一个标识,在子组件内部用props接收,子组件在模板里可以通过{{}}的形式进行使用.如果父组件给子组件传递的标识中含有-,子组件在接收时采用驼峰式接收. 父组件调用子组件的地方, 添加自定义属性,属性名随便定义(但是不要定义id,class等) 属性值为你需要传递的值(这个值可以是变量,如果是变量则使用绑定属性) 定义子组件的地方, 添加一个选项props,它是一个

NO17--vue父子组件间单向数据流的解决办法

在上一篇中讲解了父子组件之间是如何传值的,如果子组件需要改变传过来的数据供自己使用,或者想在子组件中改变传过来的数据并同步到父组件,那么直接改肯定是不行的,如果你这么做了,Vue 会在控制台给出警告. 对应这两种情况,解决方式如下: 先创建项目并运行 vue init webpack-simple templatecd templatenpm inpm run dev 一. 子组件需要改变传过来的数据供自己使用 1. 定义一个局部变量,并用 props 的值来初始化它 在 App.vue 中 <

父子组件间的通讯

因为vue进行组件开发时候,允许组件进行嵌套,因此父子组件需要进行通讯来获取父组件或子组件中的数据. 父传子 父组件给子组件传数据通过在子组件的标签上绑定属性,将数据绑定给某个属性 子组件要获取父组件传过来的信息,必须在内部定义props属性 子组件标签上: :c-message="message" 子组件内部定义porps: 数组写法 props:['cMessage'] 对象写法 props:{   cMessage:String//数据类型限制} 最全的设置写法 props:{