<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="vue-2.4.0.js"></script> </head> <body> <div id="app"> <login v-bind:parentmsg="msg" @func=‘getmsgFromSon‘></login> </div> <template id="temp"> <div> <h1>这是组件的模板----{{ parentmsg }}</h1> <!-- 子组件通过事件绑定机制向父组件传递消息 --> <input type="button" value="向父组件传递消息" @click=‘sendMes‘> </div> </template> <script> var login = { template: ‘#temp‘, data() { return { msg: "这是子组件中的值,儿子已经长大了,该给爸爸1000元钱了" } }, methods: { sendMes() { this.$emit(‘func‘,this.msg) } }, props: [‘parentmsg‘] } var vm = new Vue({ el: ‘#app‘, data: { msg: ‘这是父组件中的值,爸爸有100块钱,儿子你要不?‘, msgFromSon: ‘‘ }, methods: { getmsgFromSon(data) { this.msgFromSon = data console.log(this.msgFromSon) } }, components: { login } }); </script> </body> </html>
原文地址:https://www.cnblogs.com/andyZhang0511/p/10917208.html
时间: 2024-10-09 00:26:41