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 操作