一、父子组件通讯

子组件给父组件传值

1、子组件页面 childA

<template><div class="childA"><div>这里是子组件childA的页面显示内容</div><div @click="clickMe">定义一个点击方法叫clickMe</div></div>
</template>
<script>export default{data(){return{childAMsg:'A'}},methods:{clickMe(){this.$emit('parentFunction',this.childAMsg)//用$emit给父组件传递一个parentFunction的事件//逗号传一个参数,例如就是后面this.childAMsg指向data里面定义的变量，或者是自己写的，接口啥的调用的数据等//父组件中接收-------    <childA @parentFunction="parentEvent"></childA>//父组件中的parentFunction就是childA页面传过来的事件，parentEvent是父组件这个事件的方法}}}
</script>

2、父组件页面 parent

<template><div><childA @parentFunction="parentEvent"></childA></div>
</template>
<script>import childA from './childA'export default {components:{childA},data(){},methods:{//data就是子组件$emit传过来的数据parentEvent(data){console.log(data)   // A  }}}
</script>

父组件给子组件传值

1、先写一个父组件 parent

<template><div><childB :parent-msg="info"></childB>//parent-msg是自定义要传的参数的命名 //info是data里定义的参数</div>
</template>
<script>import childB from './childB'export default {components:{childB},data(){info:'我是父组件要传的值'},methods:{}}
</script>

2、再写一个子组件childB 需要用props去接收父组件传过来的值

<template><div class="childB"><div>{{parentInfo}}<!--/渲染为：我是父组件要传的值/--></div></div>
</template>
<script>export default {props:['parentMsg'],//前面传过来的名字有 -  ，横杠后面的首个字母要大写data(){return{parentInfo:this.parentMsg  //可以直接用this.parentMsg获取传过来的值}},methods:{}}
</script>

兄弟组件传值

那就理解成为（子组件A传值------>>父组件------>>子组件B）完成兄弟间的传值

1、首先还是一个子组件A

<template><div class="childA"><div>这里是子组件childA的页面显示内容</div><div @click="clickMe">定义一个点击方法叫clickMe</div></div>
</template>
<script>export default{data(){return{childAMsg:'A'}},methods:{clickMe(){this.$emit('parentFunction',this.childAMsg)//用$emit给父组件传递一个parentFunction的事件//逗号传一个参数,例如就是后面this.childAMsg指向data里面定义的变量，或者是自己写的，接口啥的调用的数据等//父组件中接收-------    <childA @parentFunction="parentEvent"></childA>//父组件中的parentFunction就是childA页面传过来的事件，parentEvent是父组件这个事件的方法}}}
</script>

2、然后还是一个父组件parent

<template><div><childA @parentFunction="parentEvent"></childA><childB :parent-msg="info"></childB></div>
</template>
<script>import childA from './childA'import childB from './childB'export default {components:{childA,childB},data(){return{info:"我是父组件传的值"}},methods:{//data就是子组件$emit传过来的数据parentEvent(data){console.log(data)   // Aif(data == 'A'){this.info=data //传childA页面的data}}}}
</script>

3、最后就是组件childB 需要用props去接收父组件传过来的值

用计算属性去改变parentMsg

<template><div class="childB"><div><!--/渲染为：我是父组件传的值/-->{{parentInfo}}<!--点击后渲染为：A--></div></div>
</template>
<script>export default {props:['parentMsg'],//前面传过来的名字有 -  ，横杠后面的首个字母要大写data(){return{}},computed:{parentInfo(){console.log(this.parentMsg)   //一开始是 '我是父组件传的值'return this.parentMsg         //点击后变为 ‘A’}},methods:{},created(){console.log(this.parentMsg) //'我是父组件传的值'}}
</script>

vue父子，兄弟组件传值相关推荐

vue中父子组件先后渲染_VUE如何实现子父组件、父子组件、兄弟组件传值
父子组件传值: 父组件定义: 代码示例子父组件传值: 父组件方法定义: 子组件执行父组件方法定义: methods: { closeOrOpenLeftMenu() { if (this.isLef ...
六十三、Vue中非父子(兄弟)组件间传值，插槽的使用和作用域插槽（非常重要）
2020/10/18 . 周日.今天又是奋斗的一天. @Author:Runsen @Date:2020/10/18 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是 ...
Vue3 学习笔记 —— 父子组件传值、插槽、提供/注入、兄弟组件传值、mitt
目录 1. 父子组件传值 1.1 父组件给子组件传值 -- v-bind 1.2 子组件接收父组件的传值 -- defineProps 1.3 设置子组件接受参数的默认值 -- withDefault ...
vue组件化通信之兄弟组件传值
vue组件化通信之父向子传值 vue组件化通信之子向父传值在vue中兄弟节点传值一般有两种方法:$parent和 $root, 建议使用前者使用$parent **parent.vue** < ...
vue3之语法糖script setup的父子组件、兄弟组件传值
背景:随着vue的使用范围越来越广,使用人数越来越多,其的发展更新速度也是再上一个台阶,vue2故好,但组件化过程中的某些组件化操作稍微有一些弊端,从而vue3随之诞生,vue3兼容typescrip ...
Vue组件传值——兄弟组件传值
兄弟组件传值兄弟组件之间彼此没有联系,它们需要通过中间Vue实例对象bus(快递员)进行数据传递. 1. 声明事件给组件实例(或Vue实例) 声明事件有两种方式: 直接声明通过$on实现给组件 ...
vue兄弟组件传值的方法
vue兄弟组件传值的方法主要通过event事件来传值: 传值的组件使用$emit发送事件接受值的组件通过$on绑定事件接受第一步创建js文件 test.js import Vue from ' ...
React创建组件的方法，组件的props属性、state属性的用法和特点，父子组件传值，兄弟组件传值
创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件定义一个组件最简单的方式是使用JavaS ...
React 中的父子组件兄弟组件传值
1.父组件向子组件传值 1.1 我们要明白父组件 --> 子组件是通过props这个属性来传值的父组件 import React from 'react'; import './App.cs ...

vue父子，兄弟组件传值

一、父子组件通讯

子组件给父组件传值

父组件给子组件传值

兄弟组件传值

vue父子，兄弟组件传值相关推荐

最新文章

热门文章