三、vue学习之模板与父子组件传值

最新推荐文章于 2024-08-08 17:23:21 发布

一个名字很长很长很长的JAVA工程师

最新推荐文章于 2024-08-08 17:23:21 发布

阅读量228

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/wzsy_ll/article/details/106095628

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模板与父子组件传值</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app"></div>
	</body>
	<script>
		//子模板需要挂载
		// var Header = {
		// 	data(){
		// 		return {
		// 			msg:'我是头部'
		// 		};
		// 	}
		// 	template:'<div>{{msg}}</div>'
		// };
		Vue.component('Header',{
			data(){
				return {
					msg:'我是头部',
					text:'我是子组件传进来的内容'
				};
			},
			props:['content'],
			template:'<div>{{msg}}({{content}})<button @click="setVal" >传递到父组件中</button></div>',
			methods:{
				setVal(){
					this.$emit('getChildText',this.text);
				}
			}
		});
		new Vue({
			el:'#app',
			data(){
				return {
					content:'我是父组件传进来的内容',
					childText:''
				};
			},
			// components:{
			// 	Header
			// },
			template:'<Header :content=content @getChildText=getChildText />',
			methods:{
				getChildText(val){
					this.childText = val;
					alert("父组件弹框:"+val);
				}
			}
		});
	</script>
</html>