vue親子伝値方法大全

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