一、通過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 操作