vue 父子传值 方法大全
一、通过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>