父组件向子组件传值
方法一:
子组件想要使用父组件的数据,需要通过子组件的 props 选项来获得父组件传过来的数据。
1.父组件parent.vue中代码:
<template> <div class="app"> // message 定义在子组件的 props 中 <child :message="msg"></child> </div> </template> <script> import child from './child.vue'; export default { components: { child }, data() { return { msg: 'Hello world' } } } </script>
2.在子组件 child.vue 中的 props 选项中声明它期待获得的数据
<template> <span>{{message}}</span> </template> <script> export default { // 在 props 中声明获取父组件的数据通过 message 传过来 props: ['message'] } </script>
方法二 :
使用$children可以在父组件中访问子组件。
用法:
this.$childen.xxx
方法三:
父组件直接获取子组件的数据(this.$refs.ref的名字.变量
)
// 假设我们要获取子组件<son></son>的数据target // 第一:子组件son要设置ref <son ref="sonComponent"></son> // 第二:用下面的语句去获取,修改子组件的值 console.log(this.$refs.sonComponent.target); // 取值 this.$refs.sonComponent.target = '1'; // 修改值
子组件向父组件传值
方法一:
1、给子组件child.vue绑定要发生改变的事件,通过 this.$emit 方法
<template> <div class="form-group"> <div class="form-control"> <a data-v-c99171e2="" href="javascript:;" @click="refreshTotalCountData" class="btn btn-primary query-btn">查询</a> </div> </div> </template> <script> export default { data(){ }, methods: { async refreshTotalCountData(){ var setData = "hello world!" this.$emit('transferData', setData); //'transferData' 自定义函数;'setData' 传递的数据 }, } } </script>
2、父组件parent.vue接收子组件child.vue传过来的数据
<template> <div id="parents"> <tool-bar @transferData="getDate"></tool-bar> <div>{{msg}}</div> // 123 ;当点击子组件按钮时,父组件就会发生改变 ‘hello world!’ </div> </template> <script> import child from './child.vue'; export default { data(){ return{ msg:'123' } }, methods: { getDate(setData) { this.msg = setData; }, } } </script>
方法二:
子组件直接用this.$parent.xxxx
这样直接调用父组件的方法。
方法三:
也可以使用 v-model 方式来直接绑定父组件变量,把数据从子组件传回父组件。
父组件:
<template> <div id="app"> <p id="show">总数:{{total}}</p> <Child v-model="total"/> </div> </template> <script type="text/javascript"> import Child from "./components/Child"; export default { components: { Child }, data() { return { total: 0 }; } }; </script>
子组件:
<template> <div class="child"> <button @click="click">+1</button> </div> </template> <script> export default { name: "Chlid", data() { return { count: 0 }; }, methods: { click: function() { this.count++; this.$emit("input", this.count); } } }; </script>
非父子组件间数据传递
方法一:
创建一个空的 Vue 实例作为中央事件总线,实现非父子组件之间的通信。
Vue内部有一个事件机制,可以参考源码。
$on方法用来监听一个事件。
$emit用来触发一个事件。
1.先定义一个新的bus.js文件,作为中间桥梁
import Vue from 'vue'; export var bus = new Vue();
2.在被传值页面(如:A.vue)进行引入bus.js文件,通过$emit触发
import Bus from './bus.js' export default { data() { return { message: ''" } }, methods: { bus () { Bus.$emit('msg', '传给兄弟组件们,你收到没') } } }
3.在要和$emit通信的另外一个组件(如:B.vue)中添加监听msg事件
import Bus from './bus.js' export default { data() { return { message: '' } }, mounted() { Bus.$on('msg', (e) => { this.message = e; console.log(`传来的数据是:${e}`); }) } }
这样我们就实现了非父子组件间的数据传递了
方法二:
如果项目较大,那么可以使用具有状态管理的 vuex
方法三:
可以使用element组件中的from标签进行数据传递。