父元件修改子元件data資料 以及 父元件呼叫子元件定義的方法 —— ref

子元件：

<template>
  <div class="keyboard-wrapper" :class="isShow"></div>
</template>
<script>   
export default {
    data() {
        return {
            isShow:"hide"
        }
    },
    methods: {
        cutdown() {
            alert(1)
        }
    }
}
</script>  
 

父元件：

<template>
    <Child ref="child"></Child >
</template>
<script>
import Child from "./child"
export default {
    components: {
        Child 
    },
    methods: {
         changeChildData() {
             this.$refs.child.isShow = "show"; //修改子元件isShow的值
             this.$refs.child.cutdown(); //呼叫組元件cutdown方法
         }
    }
}
</script>
 

父元件引用子元件後，在子元件上新增 ref 屬性，通過 this.$refs 的方式，父元件可以修改子元件任意data資料.

當然這種方式還可以呼叫子元件的方法：this.$refs.child.cutdown()；

父元件修改子元件中的data資料 —— props

子元件

<template>
  <div>{{title}}</div>
</template>
<script>   
export default {
   props: ['title']
}
</script>  

父元件

<template>
    <Child :title="title"></Child >
</template>
<script>
import Child from "./child"
export default {
    data() {
        return {
            title: "這是父元件定義的title"
        }
    },
    components: {
        Child 
    },
}
</script>
 

父元件引用子元件後，在子元件上繫結要傳的值，例如我們需要修改子元件的title，那我們就繫結title，然後在父元件新增一個data資料改變子元件的title值，子元件通過props的方式接收這個值；

子元件向父元件傳遞資料 —— $emit

子元件

<template>
  <div class="keyboard-wrapper" :class="isShow"></div>
</template>
<script>   
export default {
    data() {
        return {
            isShow:"hide"
        }
    },
    methods: {
        cutdown() {
            this.isShow = "hide"
            this.$emit('trans', "hide")
        }
    }
}
</script>  

父元件

<template>
    <Child @trans="hideMask"></Child >
</template>
<script>
import Child from "./child"
export default {
    components: {
        isShow 
    },
    methods: {
         hideMask(msg) {
             this.isShow = msg; //msg為子元件傳遞的資料“hide”
         }
    }
}
</script>

在子元件中通過this.$emit(引數一，引數二)的方法將引數二通過引數一為事件傳遞給父元件，父元件中在註冊的子元件上通過   @引數一=“自定義事件”  的方式在自定義事件中獲取到傳遞的資料引數二；

更新data中的陣列資料Dom不會重新渲染解決辦法

<template>
    <div v-for="item in codeList">{{item}}</div>
</template>

<script>
export default {
    data() {
        return {
            codeList:[]
        }
    }
    methods: {
         updateList() {
             for(var i = 0; i < this.codeList.length; i++){
                if(this.codeList[i] == ""){
                    this.$set(this.codeList, i, "專案"+i);
                }
             }
        }
    }
}
</script>

我們需要通過this.$set方法更新data中的陣列資料，這樣頁面才會同步渲染dom