父子組件的傳值
(一) 父組件給子組件傳值
1.父組件傳遞
- 父組件在呼叫子組件的位置，添加一個自定義屬性， 屬性的值就是父組件傳入子組件的值
- 如果屬性值是一個變數，或布爾型別的資料，或數值型別的資料， 該自定義屬性需要使用系結屬性v-bind
2.子組件接收
- 在子組件定義的位置，添加一個
props選項 - 選項的值默認是一個陣列，陣列的元素就是：
父組件在呼叫子組件的位置定義的屬性名
- 這樣就可以在子組件中通過自定義屬性名訪問父組件傳入的資料了
3.props選項內接收到的父組件傳過來的資料，可以進行一些自定義配置
- 首先將props的值改為物件，物件的key：自定義的屬性名，物件的value：物件
- 這個物件就是當前接收到資料的配置物件
- 配置選項有：
- type：資料型別
- default：默認資料
- required：當前資料為必傳資料
(二) 子組件給父組件傳值
- 準備好要送的資料
- 在父組件呼叫子組件的位置,給子組件添加自定義事件(自定義事件名不能使用現有名稱)
- 在父組件實體內部定義事件處理方法，方法的的引數會接收子組件的資料
- 在子組件的實體內部,使用this.$emit(自定義事件名, 資料)的方式觸發自定義事件,并發送資料）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{border:solid 1px black;padding: 10px;margin: 10px;}
</style>
</head>
<body>
<div id="app">
<h1>{{title}}</h1>
<p>我是：{{name}}</p>
<c></c>
</div>
</body>
<script src="vuue.js" type="text/javascript" charset="utf-8"></script>
<template id="kx">
<div>
<h2>我是：{{name}}</h2>
<p>我有什么：{{a}}</p>
<child1></child1>
<child2></child2>
</div>
</template>
<template id="yx">
<div>
<h3>我是：{{name}}</h3>
<p>我有什么：{{a}}</p>
</div>
</template>
<template id="yz">
<div>
<h3>我是：{{name}}</h3>
<p>我有什么：{{a}}</p>
<p>我拿到了兒子的：{{b}}</p>
<child :abc="a" v-on:myeve="getData"></child>
</div>
</template>
<template id="ql">
<div>
<h4>我是：{{name}}</h4>
<p>我有什么：{{a}}</p>
<p>收到了父級的：{{abc}}</p>
</div>
</template>
<script type="text/javascript">
let temp1 = {
template:"#ql",
data(){
return {
name:"乾隆",
a:"手機"
}
},
props:["abc"],
created(){
this.$emit("myeve", this.a)
}
}
let temp2 = {
template:"#yx",
data(){
return {
name:"胤祥",
a:"大眾"
}
}
}
let temp3 = {
template:"#yz",
data(){
return {
name:"雍正",
a:"黃浦區的房子",
b:""
}
},
components:{
child: temp1
},
methods:{
getData(v){
console.log(v);
this.b = v;
}
}
}
let temp4 = {
template:"#kx",
data(){
return {
name:"康熙",
a:"翡翠白菜"
}
},
components:{
child1: temp2,
child2: temp3
}
}
var vm = new Vue({
el:"#app",
data:{
title:"hello component",
name:"努爾哈赤",
a:"江山"
},
components:{
c:temp4
}
})
// 努爾哈赤
// 康熙
// 雍正
// 乾隆
// 胤祥
</script>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/267139.html
標籤：其他