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

一、父组件向子组件传值
在vue中通常使用props向子组件传递数据

1.创建子组件，在src/components/文件夹下新建一个Child.vue
2.Child.vue的中创建props，然后创建一个名为message的属性

3.在App.vue中注册Child组件，并在template中加入child标签，标签中添加message属性并赋值

4.保存修改的文件，查看浏览器

5.我们依然可以对message的值进行v-bind动态绑定

此时浏览器中

父组件向子组件传值成功

总结一下：
1.子组件在props中创建一个属性，用以接收父组件传过来的值
2.父组件中注册子组件
3.在子组件标签中添加子组件props中创建的属性
4.把需要传给子组件的值赋给该属性

二、子组件向父组件传值
1.在子组件中创建一个按钮，给按钮绑定一个点击事件

2.在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数

3.在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法

4.保存修改的文件，在浏览器中点击按钮

子组件向父组件传值成功
总结一下：
1.子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
2.将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
3.在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
4.在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了

三、非父子组件之间的传值
1.公共实例文件bus.js，作为公共数控中央总线

import Vue from "vue";
export default new Vue();

2.第一个组件 first.vue

import Bus from '../bus.js';
export default {name: 'first',data () {return {value: '我来自first.vue组件！'}},methods:{add(){// 定义add方法，并将msg通过txt传给second组件Bus.$emit('txt',this.value);}}
}

3.第二个组件second.vue

import Bus from '../bus.js';
export default {name: 'second',data () {return {}},mounted:function(){Bus.$on('txt',function(val){//监听first组件的txt事件console.log(val);});}
}

这样，就可以在第二个非父子关系的组件中，通过第三者bus.js来获取到第一个组件的value

vue父子组件及非父子组件之间的传值相关推荐

父子组建传值_浅谈Vue父子组件和非父子组件传值问题
本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue goodsList组件 expor ...
this指向-作用域、作用域链-预解析变量提升-Vue组件传值父子子父非父子-Vue数据双向绑定原理
目录 this指向作用域.作用域链预解析变量提升 Vue组件传值父子子父非父子 Vue数据双向绑定原理 1.this指向函数的this指向看调用.不看声明 (1)普通函数调用 ①函数名 ...
02-React受控组件及非受控组件、数据渲染、事件处理、组件通信
一.受控组件和非受控组件 React组件的数据渲染是否被调用是通过传递过来的props完全控制控制则为受控组件,否则非受控组件. 二.数据渲染 1.条件渲染 { flag ? "开启& ...
受控组件和非受控组件
受控组件和非受控组件 React的受控组件与非受控组件的概念是相对于表单而言的,在React中表单元素通常会持有一下内部的state,因此它的工作方式与其他HTML元素不一样,而获取表单元素内部sta ...
【REACT-受控组件和非受控组件】
REACT-受控组件和非受控组件概述受控组件非受控组件受控组件应用ToDoList 概述 React中的组件根据是否受React控制可分为受控的和非受控的. React 中的受控组件和非受控组 ...
什么是React受控组件和非受控组件
React是一个非常流行的JavaScript库,用于构建Web应用程序.React中有两种类型的组件,受控组件和非受控组件.在本文中,我们将深入研究这两种组件的区别,优缺点以及如何选择适当的组件类型 ...
React 受控组件和非受控组件（总结）
React 受控组件和非受控组件文章目录 React 受控组件和非受控组件受控组件非受控组件拓展:什么是***event*.target** 受控组件在React中,可变的状态通常保存在组件 ...
java中组件与容器_java中的容器组件和非容器组件
1.java使用到的图形类主要在java.awt 与javax.swing包中. 2.java.awt 与 javax.swing包的区别: ① java.awt中使用的图形类都是依赖于系统的图形库的 ...
[react] 受控组件和非受控组件有什么区别？
[react] 受控组件和非受控组件有什么区别? 受控组件用value和组件的state绑定,当value更新时,会自动更新state 非受控组件没有value,采用ref直接操作dom 个人简介我 ...
深入react技术栈(10):受控组件和非受控组件
我是歌谣放弃很容易但是坚持一定很酷微信公众号关注前端小歌谣受控组件非受控组件受控组件和非受控组件的区别文章参考深入React技术栈

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

vue父子组件及非父子组件之间的传值相关推荐

最新文章

热门文章