vue @click 传值_第四章 vue的学习

Special thanks to my daddy, this article was recorded on Father’s Day 2020！

Vue常用的三种传值方式有：父传子/子传父/非父子传值

  01爸爸给仔 Prop

用一个形象的比喻来说，父子组件之间的数据传递相当于自上而下的下水管子，只能从上往下流，不能逆流。这也正是 Vue 的设计理念之单向数据流。

(着重于数据的传递，它并不能调用子组件里的属性和方法。像创建文章组件时，自定义标题和内容这样的使用场景，最适合使用prop。)


parent：下面是我的子组件

<template><div>
    child:这是父组件给我传的数据——{{userName}}div>template><script>
export default {name:'Childs',props:['userName'],
    data(){
        return{
        }
    }
}script>

　02仔给爸爸emit

子组件向父组件传递数据，不能像上面一样实时的传递数据，必须通过 事件 触发。我们通过 $emit 方法来向父子间传递数据，第一个参数为事件的 名称 ，第二个为传递的 数据 ，是一个可选的参数。父组件必须监听同样的事件名称才能监听到我们的这个事件，事件抛出的值必须通过 $event或者通过一个方法来访问。


parent：这是我的子组件传给我的值：{{num}}


child:这是父组件给我传的数据——{{content}} 点击我可以向父子间传递参数哦

　03 非父子，用公共的js，开一台bus

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

//bus.jsimport Vue from 'vue'export default new Vue()
<template>
<div>A组件:
<span>{{elementValue}}</span><input type="button" value="点击触发" @click="elementByValue">
    </div></template><script>// 引入公共的bus?，来做为中间传达的工具import Bus from './bus.js'export default {data () {return {elementValue: 4}
    },methods: {elementByValue: function () {Bus.$emit('val', this.elementValue)
        }
    }
}
</script><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>

文字 | sunny学习笔记?

资料 | vue官网&Google