1. 子組件向父組件傳值

子組件：

<template><div>子組件:<span>{{childValue}}</span><!-- 定義一個子組件傳值的方法 --><input type="button" value="點擊觸發" @click="childClick"></div> </template> <script>export default {data () {return {childValue: '我是子組件的數據'}},methods: {childClick () {// childByValue是在父組件on監聽的方法// 第二個參數this.childValue是需要傳的值this.$emit('childByValue', this.childValue)}}} </script>

父組件：

<template><div>父組件:<span>{{name}}</span><br><br><!-- 引入子組件 定義一個on的方法監聽子組件的狀態--><child v-on:childByValue="childByValue"></child></div> </template> <script>import child from './child'export default {components: {child},data () {return {name: ''}},methods: {childByValue: function (childValue) {// childValue就是子組件傳過來的值this.name = childValue}}} </scrip

2. 非父子組件進行傳值

非父子組件之間傳值，需要定義個公共的公共實例文件bus.js，作為中間倉庫來傳值，不然路由組件之間達不到傳值的效果。

公共bus.js

//bus.js import Vue from 'vue' export default new Vue()

組件A：

<template><div>A組件:<span>{{elementValue}}</span><input type="button" value="點擊觸發" @click="elementByValue"></div> </template> <script>// 引入公共的bug，來做為中間傳達的工具import Bus from './bus.js'export default {data () {return {elementValue: 4}},methods: {elementByValue: function () {Bus.$emit('val', this.elementValue)}}} </script>

組件B：

<template><div>B組件:<input type="button" value="點擊觸發" @click="getData"><span>{{name}}</span></div> </template> <script>import Bus from './bus.js'export default {data () {return {name: 0}},mounted: function () {var vm = this// 用$on事件來接收參數Bus.$on('val', (data) => {console.log(data)vm.name = data})},methods: {getData: function () {this.name++}}} </script>

注：用$on事件來接收參數時，會被重復多次執行；

解決辦法：在$on事件前，執行$off

Bus.$off('min');
Bus.$on('min', (data) => {
vm.min = data;
// console.log('測試數據！',data)
});

優化處理非父子組件傳值方式：

Vue 中Bus使用

• 使用：兄弟組件之間傳值；
• 安裝： npm install vue-bus
• 在main.js 中引入vuebus：

全局引入	import Vue from 'vue';import VueBus from 'vue-bus'; Vue.use(VueBus);

在組件中使用
觸發事件：
this.$bus.emit("onslected",params)
應對事件：
mounted:function(){
this.$bus.on("onslected",function(){
});
},
destroyed:function(){
this.$bus.off("onslected");
}

總結

以上是生活随笔為你收集整理的vue中父子组件先后渲染_vue父子组件传值（子传父，非父子组件传值）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。