1偎蘸、父組件傳值給子組件
2、子組件傳值給父組件
1、父組件傳值給子組件
<body>
<template id="account">
<div>
<h3>組件內(nèi)容:{{name1}}</h3>
</div>
</template>
<div id="app">
<!----使用組件---->
<account :name1="name"></account>
<div>
</body>
<script type="text/javascript">
Vue.component("account",{
template:"#account"嫩絮,
//接收數(shù)據(jù)
props:{
name1:String //接收的數(shù)據(jù)的類型
}
})
new Vue({
el:"app",
data:{
name:"locdee"
}
})
</script>
2、子組件傳值給父組件
<body>
<template id="account">
<div>
<!---在子組件綁定一個(gè)事件click围肥,發(fā)送數(shù)據(jù)--->
<h3 @click="sendData">發(fā)送數(shù)據(jù)</h3>
</div>
</template>
<div id="app">
<!----首先,在父組件定義一個(gè)方法send---->
<account @send="getData"></account>
<div>
</body>
<script type="text/javascript">
Vue.component("account",{
template:"#account"剿干,
methods:{
sendData(){
//$emit兩個(gè)參數(shù),第一個(gè)對(duì)應(yīng)父組件的函數(shù),第二個(gè)是要發(fā)送的內(nèi)容
this.$emit("send",123)
}
}
})
new Vue({
el:"app",
data:{
name:"locdee"
},
methods:{
getData(input){
console.log(input)
}
}
})
</script>