html vue.js在组件$ .emit之外发送数据

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html vue.js在组件$ .emit之外发送数据相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
	<head>
		<title>Vue Project</title>
		<meta http-equiv='content-type' content='text/html;charset=utf-8'>
		<meta name='viewport' content='width=device-width,initial-scale=1.0'>
		<style>
			h1,h2,h3,h4,h5,h6,div,p,span{font-family:helvetica;padding:0;margin:0;}
			input{width:150px;}
			#app{border:2px solid red;padding:10px 5px;}
			.comp_root{border:2px solid blue;padding:10px 5px}
			p{color:white;background:red}
		</style>
		<script type='text/javascript' src='vue.js'></script>
	<body>
		<div id='app'>
			<h1>ParentDIV</h1>
			<comp v-on:relay='allocate'></comp><hr/>
			<p>{{content1}}</p><hr/>
			<p>{{content2}}</p>
		</div>
		<template id='temp'>
			<div class='comp_root'>
				<h2>Component</h2>
				<input v-model='message1'/><hr/>
				<input v-model='message2'/>
				<button v-on:click='send'>Send Data</button>
			</div>
		</template>
	<script type='text/javascript'>
		var vm = Vue.component('comp',{
			template:'#temp',
			data:function(){
				return{
					message1:'Stored in MSG 1',
					message2:'Stored in MSG 2',
				}
			},
			props:[],
			methods:{
				send:function(){
					this.$emit('relay',this.message1,this.message2)
				}
			},
		})
		var vm = new Vue({
			el:'#app',
			data:{
				content1:"Controlled By Content 1",
				content2:"Controlled By Content 2",
			},
			methods:{
				allocate:function(v1,v2){
					this.content1=v1
					this.content2=v2
				}
			},
		})

以上是关于html vue.js在组件$ .emit之外发送数据的主要内容，如果未能解决你的问题，请参考以下文章

Vue.js - 从孙插槽组件发射没有将 $emit 事件冒泡到父级

将 vue.js 组件子中的对象或值发送到父通信

vuejs子组件怎么获取父组件的值

Vue JS Vuetify $emit 第一次无法正常工作

vue.js学习笔记— 父子组件之间通信的第一种方式 props 和 $emit

vue.js学习笔记— $emit 作用快速了解