Vue三种常用传值示例(父传子、子传父、非父子)

2019-11-19 13:25:48

字体：大中小

来源：转载

供稿：网友

1、父组件向子组件进行传值：

父组件：

  <template>  <div>  父组件:  <input type="text" v-model="name">  <br>  <br>  <!-- 引入子组件 -->  <child :inputName="name"></child>  </div> </template> <script>  import child from './child'  export default {  components: {   child  },  data () {   return {   name: ''   }  }  } </script>

子组件：

 <template>  <div>  子组件:  <span>{{inputName}}</span>  </div> </template> <script>  export default {  // 接受父组件的值  props: {   inputName: String,   required: true  }  } </script>

2.子组件向父组件传值

子组件：

  <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  } } }</script>

3.非父子组件进行传值。（非父子组件之间传值，需要定义个公共的公共实例文件bus.js，作为中间仓库来传值，不然路由组件之间达不到传值的效果。）

公共bus.js

//bus.jsimport 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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：jQuery实现菜单的显示和隐藏功能示例

下一篇：微信小程序实现横向增长表格的方法