vue的父子组件之间的通信详解

一、父组件给子组件传值

父组件引入子组件，并对子组件进行监听

<!-- 父组件 --><template><div><h1>我是父组件！</h1><!-- 用一个变量进行动态赋值。--><child :message="msg"></child>  父组件监听子组件的变量</div>
</template><script>
import Child from '../components/child.vue'
export default {components: {Child},data() {return {a:'我是子组件二！',b:112233,msg: '我是子组件三！'+ Math.random()}}
}
</script>

子组件的

<!-- 子组件 --><template><h3>{{message}}</h3>
</template>
<script>export default {props: ['message']  子组件接收父组件的数值}
</script>

二、子组件改变父组件的值

$emit 绑定一个自定义事件event，当这个这个语句被执行到的时候，就会将参数arg传递给父组件，父组件通过@event监听并接收参数。
1.父组件引入子组件，并对子组件的事件进行监听

<template><div><h1>{{title}}</h1><child @getMessage="showMsg"></child></div>
</template><script>import Child from '../components/child.vue'export default {components: {Child},data(){return{title:''}},methods:{showMsg(title){this.title=title;}}}
</script>

2.子组件通过改变事件来修改变量的值，并传送给父组件

<template><h3>我是子组件！</h3>
</template>
<script>export default {mounted: function () {this.$emit('getMessage', '我是父组件！')}}
</script>

vue的父子组件之间的通信详解相关推荐

Vue非父子组件之间的通信
文章目录非父子组件的通信 1.Provide和Inject 1.1基本使用 1.2处理响应式数据(了解) 2.全局事件总线非父子组件的通信此篇讲解的是, 在学习状态管理之前, 非父子间通信的方案 ...
【Vue】父子组件之间的通信
情景父组件有一个 btnList 数组,里面存放着按钮的名称和按钮的id,现在要把这个数组传入到子组件中进行渲染. 子组件渲染出按钮后,点击按钮,父组件的 h1 标签中会显示出当前点击的按钮是哪一个 ...
React（一）父子组件之间的通信
无论是React,还是Vue,父子组件之间的通信都是组件式开发至关重要的一部分.备注一下基础要点. 1.父组件向子组件传值父组件向子组件传值是在调用子组件的时候通过参数传递给子组件 .父组件代码 i ...
vue/父子组件之间的通信
父子组件之间的通信父组件绑定数据在组件上子组件props属性接收父组件内的data属性中待传的数据data1 => <cpn :data2="data1">& ...
Vue中父子及非父子组件之间的通信方法
Vue中父子及非父子组件之间的通信方法父子组件之间的通信方法父级->子级通信 (依赖单向数据绑定+props实现) Vue.component('Father', { //注册了含有data ...
Vue中关于父子组件之间的通信
父子组件之间的通信是vue中的基础知识,在此做一个简单的梳理. 总的来说父传子是通过props,子传父是通过$emit. 简单的一个demo来说说,先上代码父组件: 如图,HelloWorld是一个 ...
VUE 2.0 父子组件之间的通信
父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent><child :child-com="content"></child ...
Vue中父子组件之间传值，兄弟组件之间传值（两种方法）
一.父向子传值props 父组件向子组件传值: parent:<parent><child :message="msg"></child> // ...
vue父子组件之间的通信
在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使用,遇到业务逻辑操作时子组 ...

vue的父子组件之间的通信详解

vue的父子组件之间的通信详解

一、父组件给子组件传值

二、子组件改变父组件的值

vue的父子组件之间的通信详解相关推荐

最新文章

热门文章