父组件给子组件传值
首先我们定义两个组件
1.一个父组件和一个子组件。
2.在子组件标签中绑定自定义属性名,值为父组件传送的值。
3.子组件内部通过props,以数组的形式来接收书属性名---属性名指的是传送数据的变量。
下面就是小案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 父组件给子组件传值</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="box">
<my-a></my-a>
</div>
<template id="banner">
<div>
<h1 >这是父组件</h1>
<button @click="tap()">点击传值</button>
<my-b :name="str1"></my-b>
</div>
</template>
<template id="footer">
<div>
<h3>这是子组件</h3>
<p>这是父组件传过来的值---{{ name }}</p>
</div>
</template>
</body>
<script type="text/javascript">
const Footer = {
template:"#footer",
props:['name']//接收传送过来的数据
}
const Banner = {
template:"#banner",
components:{
"my-b":Footer
},
data(){
return{
str:"传送的数据",
str1:'',
}
},
methods:{
tap(){
this.str1 = this.str
}
}
}
const app = new Vue({
el:"#box",
components:{
"my-a":Banner
}
})
</script>
</html>