最常用的父子组件传值方式prop详解
程序员文章站
2022-07-09 19:40:06
最常用的父子组件传值方式prop详解...
组件传参 prop
父组件给子组件传参
- 所有的prop都使得其父子prop之间形成一个
单向下行绑定: 父级prop的更新会向下流动到子组件中, 但是反过来则不行; 这样会防止从子组件意外改变父组件的状态, 从而导致您的应用的数据流向难以理解; - 最常用的传值方式;当然还有其他;
eg
<!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">
<!-- 绑定一个属性传值,article这个名字随便取的,自定义 -->
<blog-art :article='art'></blog-art>
</div>
</body>
</html>
<script type="text/javascript">
var chi = {
template:'<p>{{author}}</p>',
props : ['author']
}
var art = {
template:`
<div>
<h1>{{article.title}}</h1>
<p>{{article.content}}</p>
<child :author='article.author'></child>
</div>
`,
// 定义一个props
props : ['article'],
// 注册
components:{
'child':chi
}
};
// 局部组件
var vm = new Vue({
el:'#app',
data:{
art:{
title:"article title",
content:"article content",
author:'小明'
},
},
components:{
'blog-art':art
}
});
</script>
本文地址：https://blog.csdn.net/weixin_41887155/article/details/107597470
上一篇： LAMP架构搭建详解与论坛的部署