1、父组件传值给子组件
2、子组件传值给父组件
1、父组件传值给子组件
<body>
<template id="account">
<div>
<h3>组件内容：{{name1}}</h3>
</div>
</template>
<div id="app">
<!----使用组件---->
<account :name1="name"></account>
<div>
</body>
<script type="text/javascript">
Vue.component("account",{
template:"#account"，
//接收数据
props:{
name1:String //接收的数据的类型
}
})
new Vue({
el:"app",
data:{
name:"locdee"
}
})
</script>
2、子组件传值给父组件
<body>
<template id="account">
<div>
<!---在子组件绑定一个事件click，发送数据--->
<h3 @click="sendData">发送数据</h3>
</div>
</template>
<div id="app">
<!----首先,在父组件定义一个方法send---->
<account @send="getData"></account>
<div>
</body>
<script type="text/javascript">
Vue.component("account",{
template:"#account"，
methods:{
sendData（）{
//$emit两个参数,第一个对应父组件的函数，第二个是要发送的内容
this.$emit("send",123)
}
}
})
new Vue({
el:"app",
data:{
name:"locdee"
},
methods:{
getData(input){
console.log(input)
}
}
})
</script>
网友评论