Vue组件间的通信--父传子
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue组件间的通信--父传子相关的知识，希望对你有一定的参考价值。
属性传值，子组件props 接收
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<parent></parent>
</div>
<script src="js/vue.min.js"></script>
<script>
//1:创建父组件
Vue.component("parent",{
data:function(){
return {money:3000}
},
template:`
<div>
<h4>父组件</h4>
<child :myValue="money"></child>
</div>
`
});
//2:创建子组件
Vue.component("child",{
template:`<div><h3>子组件</h3>
{{myValue}}
</div>`,
props:["myValue"], // 声明变量保存父组件数据
mounted:function(){
//声明变量结束，获取父元素数据.
//己存保存 this.data
console.log(this.myValue);
}
});
//3:创建Vue
new Vue({el:"#app"});
</script>
</body>
</html>
<body>
<div id="app">
<my-login></my-login>
</div>
<script src="vue.min.js"></script>
<script>
Vue.component("my-login",{
template:`
<div>
<h3>父组件</h3>
username
<my-input tips="用户名"></my-input>
password
<my-input tips="密码"></my-input>
</div>
`
});
Vue.component("my-input",{
props:['tips'],
template:`
<input type="text" :placeholder="tips" />
`
});
new Vue({el:"#app"});
</script>
</body>
以上是关于Vue组件间的通信--父传子的主要内容，如果未能解决你的问题，请参考以下文章