vue傳值方式有:1、prop向下傳遞,事件向上傳遞;2、子元件透過$emit觸發父元件的自訂事件;3、透過定義公用實例檔案來進行非父子元件之間的傳值。
本文操作環境:windows7系統、vue2.5.17版,DELL G3電腦。
vue傳值方式有哪些?
Vue中常用的三種傳值方式
父傳子
父子元件的關係可以總結為prop向下傳遞,事件向上傳遞。父組件透過prop給子組件下發數據,子組件透過事件給父組件發送訊息。
父元件:
<template> <p> 父组件: <input type="text" v-model="name"> <br> <br> <!-- 引入子组件 --> <child :inputName="name"></child> //child子组件通过 :inputName="name" 将值传过去 </p> </template> <script> import child from './child' export default { components: { child }, data () { return { name: '' } } } </script>
子元件:
<template> <p> 子组件: <span>{{inputName}}</span> </p> </template> <script> export default { // 接受父组件的值 props: { inputName: String, //在这里对传过来的进行接收 required: true } } </script>
子傳父
##子元件可以透過$emit觸發父組件的自訂事件。 vm.$emit(event,arg) 用來觸發目前實例上的事件;子元件:
<template> <p> 子组件: <span>{{childValue}}</span> <!-- 定义一个子组件传值的方法 --> <input type="button" value="点击触发" @click="childClick"> </p> </template> <script> export default { data () { return { childValue: '我是子组件的数据' } }, methods: { childClick () { // childByValue是在父组件on监听的方法 // 第二个参数this.childValue是需要传的值 this.$emit('childByValue', this.childValue) } } } </script>父元件:
<template> <p> 父组件: <span>{{name}}</span> <br> <br> <!-- 引入子组件 定义一个on的方法监听子组件的状态--> <child v-on:childByValue="childByValue"></child> </p> </template> <script> import child from './child' export default { components: { child }, data () { return { name: '' } }, methods: { childByValue: function (childValue) { // childValue就是子组件传过来的值 this.name = childValue } } } </script>
#非父子元件傳值
非父子元件之間傳值,需要定義個公共的公共實例檔案bus.js,作為中間倉庫來傳值,不然路由元件之間達不到傳值的效果。公有bus.js
//bus.js import Vue from 'vue' export default new Vue()元件A:
<template> <p> A组件: <span>{{elementValue}}</span> <input type="button" value="点击触发" @click="elementByValue"> </p> </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> <p> B组件: <input type="button" value="点击触发" @click="getData"> <span>{{name}}</span> </p> </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>相關推薦:《
以上是vue傳值方式有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!