vue中中的元件通訊
阿新 • • 發佈：2021-02-05
技術標籤：筆記
1.父元件傳遞給子元件資訊props
寫法簡說：父元件中通過v-bind方法繫結子元件中的props中的方法，然後通過該方法繫結值,下文中的是v-bind:(props_name) = “父元件data方法中的值”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>父元件向子元件資訊傳遞props</title>
</head>
<body>
<div id="app" 2.子元件像父元件傳值**$ emit**
格式：this.$emit(‘事件名稱’,‘需要傳入的值’)；
模板中父元件：@傳入的時間名稱=“父元件中自定義方法”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- //父元件 -->
<div id="app">
<cpn @itemclick="cpnclick"></cpn>
</div>
<!-- //子元件 -->
<template id="cpn">
<div>
<button v-for="item in categories" @click="btnClick(item)">{{item.name}}</button>
</div>
</template>
<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript">
//子元件
const cpn = {
template : '#cpn',
data(){
return {
categories : [
{id:'aaa',name:'熱門推薦'},
{id:'bbb',name:'手機數碼'},
{id:'ccc',name:'家用家電'},
]
}
},
methods:{
btnClick(item){
//發射出去一個事件的名稱
this.$emit('itemclick',item);
}
}
}
//父元件
var app = new Vue({
el:'#app',
data:{
message : '您哈呀'
},
methods:{
cpnclick(item){
console.log(item)
}
},
components:{
cpn
}
})
</script>
</body>
</html>
父元件直接訪問子元件children
格式：this.$ children(一般拿所有的值的時候回用到)
this.$ refs.html中的ref屬性的名字（拿某一個元件的值）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<cpn ref="aaa"></cpn>
<cpn></cpn>
<cpn></cpn>
<button @click="btnclick">我是按鈕</button>
</div>
<template id="cpn">
<div>我是子元件</div>
</template>
<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript">
const app = new Vue({
el:'#app',
data:{
message:'ninhaoy'
},
methods:{
btnclick(){
this.$refs.aaa.showMessage();
this.$children[0].showMessage();
}
},
components:{
cpn:{
template:'#cpn',
methods:{
showMessage(){
console.log('我是子元件的方法')
}
}
}
}
})
</script>
</body>
</html>
子訪問父元件中的資料parent
用法this.$parent
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<cpn></cpn>
</div>
<template id="cpn">
<ccpn></ccpn>
</template>
<template id="ccpn">
<h2 @click="btnclick()">我是子元件</h2>
</template>
<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript">
const app = new Vue({
el:'#app',
methods:{
message:'您好呀',
},
components:{
cpn:{
template:'#cpn',
data(){
return {
name:'我是不是你們的小可愛'
}
},
components:{
ccpn:{
template:'#ccpn',
methods:{
btnclick(){
// 訪問父元件
console.log(this.$parent.name)
}
}
}
}
},
},
})
</script>
</body>
</html>