html vue.js道具将数据从父级传递给子级

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html vue.js道具将数据从父级传递给子级相关的知识，希望对你有一定的参考价值。

<!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;font-size:36px;}
			.comp_root{background:red;color:white;}
			#app{background:orange;padding:25px;color:blue}
		</style>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
	<body>
		<div id='app'>
			<p>VM instance</p>
			<comp v-bind:prop='vue_data'></comp>
		</div>
		<template id='temp'>
			<div class='comp_root'>
				<p>This is a component</p>
				<hr/>
				<p>{{message}}</p>
				<hr/>
				<p>{{prop}}</p>
			</div>
		</template>
	<script type='text/javascript'>
		var vm = Vue.component('comp',{
			template:'#temp',
			data:function(){
				return{
				message:"Component's data and "+this.prop,
				}
			},
			props:['prop'],
			methods:{},
		})
		var vm = new Vue({
			el:'#app',
			data:{
				vue_data:"Vue's data",
			},
		})
		
	</script>	
	</body>
</html>

以上是关于html vue.js道具将数据从父级传递给子级的主要内容，如果未能解决你的问题，请参考以下文章

在 React-Router 中将状态作为道具从父级传递给子级？

如何通过事件将数据从父级传递给子级

使用 XLPagerTabStrip 将数据从父级传递给子级

Vue 组件：如何将数据从父级传递给子级

在 React 中将数据从父级传递给子级

如何在Vue2中将数据从父级传递给子级