vue-cli创建项目，直接上码————
1-4父传字，5-8子传父
子组件
<template> <div id="app"> <p>子组件</p> <p>子组件：{{msg2}}</p> <p>接收父组件传值{{gozi}}</p> <!-- ⑤.子组件定义事件触发(@ 是 v-on简写) --> <button @click="gofu">传给父组件</button> </div> </template> <script> export default { name: 'Child', data () { return { msg2: 50, msg3: '子组件传给父组件--30' } }, // ④.子组件通过props属性接收父组件传过来的值,Number为判断传值的类型 // 注：并且这是单向数据流，即当父组件的值改变时，传到子组件的值也会改变，反过来不行 props: { gozi: Number }, methods: { gofu () { // ⑥.通过$emit方法传数据给父组件 // gofus是组件名，父组件要用gefus方法接收传值，this.msg3是传给父组件的数据 this.$emit('gofus', this.msg3) } } } </script>
父组件
<template> <div id="app"> <p>父组件</p> <p>父组件：{{msg}}</p> <!-- ③.引用Child组件 用v-bind(简写 :)绑定子组件并将下面data内msg的值传到子组件--> <!-- ⑦. gofus是子组件提交的事件，getzi是父组件定义方法 --> <Child :gozi="msg" @gofus="getzi"></Child> </div> </template> <script> // ①.引入子组件 import Child from './zi' export default { name: 'App', data () { return { msg: 6 } }, // ②.注册组件 components: { Child }, methods: { // ⑧.得到子组件传过来的值 getzi (event) { console.log(event) } } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
非父子传值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./vue.js"></script> </head> <body> <!-- 先看官方介绍： $on( event, callback ) 监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。 $emit 它是一个触发当前实例上的事件。附加参数都会传给监听器回调。 PS: 共用同一个Vue的实例( new Vue() )，通过此实例进行事件传递参数，在其他组件中监听此事件并且接收参数实现通信。--> <div id="app"> <sister></sister> <brother></brother> </div> <script> var bus = new Vue() //空的实例，中央事件总线 Vue.component("sister", { template:`<div> qq邮箱订阅<input type="text" ref="mytext"> <button @click="lssued">发了</button> </div>`, methods: { // 定义lssued方法，将数据传递出去（前者是传递出去的事件，后者是数据） lssued () { bus.$emit("message", this.$refs.mytext.value) } } }) Vue.component("brother", { template:`<div> 订阅者 </div>`, mounted() { // 监听事件并接受数据 bus.$on("message", (data) => { console.log("收到订阅的内容",data) }) console.log("当前组件的dom创建完之后就自动执行该方法") } }) var vm = new Vue({ el:"#app" }) </script> </body> </html>
最后，拜拜~~记得推荐