vue 父子傳值 方法大全
- 一、通過props傳遞資料
- 父頁面
- 子頁面
- 二、子控制元件給父控制元件傳遞值
- 父頁面
- 子頁面
- 三、插槽slot
- 四、vuex
一、通過props傳遞資料
只能是父控制元件傳遞給子控制元件
父頁面
<template>
<div id="app">
<!-- <HelloWorld1 width="400" height="500" arr="[1,2,3,4,5]" /> -->
<HelloWorld1 width=1 height="500" :arr="arr11" ></HelloWorld1>
</div>
</template>
<script>
import HelloWorld1 from "./HelloWorld1";
export default {
data(){
return{
arr11:[1,2,3,4,5]
}
},
components: {
HelloWorld1
}
};
</script>
子頁面
<template>
<div>
子控制元件獲取到的值:<br />
{{ width }}<br />
{{ height }}<br />
{{arr}}
</div>
</template>>
<script>
export default {
props: {
width: {
//接受型別
type: String,
//false 可以為空 .true 不能為空 報錯但不影響顯示
required: false,
//默認值
default: "800",
},
height: {
//接受型別(多種型別)
type: [Number, String],
},
arr: {
type: Array,
required: true,
},
},
};
</script>
二、子控制元件給父控制元件傳遞值
父頁面
<template>
<div id="app">
點擊按鈕我就從500變成了800<br/> {{width}}
<hr>
<HelloWorld1 @myChange111="dochange" />
</div>
</template>
<script>
import HelloWorld1 from "./HelloWorld1";
export default {
name: 'App',
data(){
return{
width:500
}
},methods:{
dochange(val){
this.width=val;
}
},
components: {
HelloWorld1
}
}
</script>
子頁面
<template>
<div>
<button @click="dochange()">ahahha</button>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
dochange() {
this.$emit("myChange111", 800);
},
},
};
</script>
三、插槽slot
vue 插槽的使用
四、vuex
vuex 簡單的 state與mutations 操作
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/168281.html
標籤：其他
上一篇：單元測驗和Mock
下一篇：ffmpeg去除B幀的問題