父元件向子元件傳值

在父元素向子元素傳值過程中，需要用到一個很重要的屬性，即 props，接收值為一個數組或物件，用於獲取父元件的資料。props 接收的值不可含有大寫字母，否則無法識別
接下來，我們看一個例項用於瞭解此過程。
在看本例項時，子元件與父元件的互動是在 son 標籤上用 : 進行的

<div id="app">
        <!-- 將父元素內的 giveSun 與 props 內的 fathermsg 繫結，再次強調，此處的 fathermsg 不可以大寫 -->
        <son :fathermsg='giveSun'></son>
    </div>
    <script>
        // 子元件，在父元件中呼叫
        let son = {
            // 生成模板，此處的 fathermsg 在上面元件中已經與 giveSun 繫結
            template: `
                <div>
                    {{fathermsg}}
                </div>
            `,
            props: ['fathermsg'] // !!
        }
        // 父元件
        new Vue({
            el: '#app',
            data () {
                return {
                    // 傳遞的資料
                    giveSun:'hello,my son' 
                }
            },
            components: { // 呼叫子元素，並生成元件
                'son': son
            }
        })
    </script>

 

子元件向父元件傳值

我們先來介紹一個方法，在子元素中呼叫父元素的方法
重點在 $emit 上。
與上面的 props 類似，$emit 也用來操作標籤上父子元素繫結的事件

    <div id="app">
        <!-- 父元素內的 num -->
        {{num}}
        <!-- @sunadd='add' 的作用是將子元件中的 sunadd 與父元件中的 add 聯絡起來 -->
        <son @sunadd='add'></son>
    </div>
    <script>
        let son = {
            template: `
            // 觸發點選事件
            <button @click='sunadd'>增加</button>
            `,
            methods: {
                sunadd () {
                // 獲取標籤內的父子元素繫結關係，並通過 sunadd 去呼叫父元素中的 add 方法並執行,
                //其中 $emit 的作用實際就是獲取標籤中的繫結關係並執行繫結的父元素中的事件
                this.$emit('sunadd')
            }
            }
        }
        new Vue({
            el: '#app',
            data () {
                return {
                    num: 0
                }
            },
            // 父子元件繫結
            components: {
                'son': son
            },
            methods: {
                // 父元件定義事件
                add () {
                    this.num ++
                }
            }
        })
    </script>
 

這雖然也是一種解決方法，但如果我們想向父元素傳遞一個值時，可以在 this.$emit('sunadd') 後追加引數，並在父類方法中傳入一個引數

我們接下來來看另外一種方法，用於在父元素中拿到子元素的值，ref
重點在於 ref 在子元素的宣告，以及父元素中 $refs 的獲取

<div id="app">
      <!-- 在此處定義一個 ref，之後便於父元素獲取 -->
    <son ref='sonref'></son>
</div>
<script>
    let son = {
        data () {
            return {
                sun: '這是子元素的內容'
            }
        },
        template: `
        // 觸發點選事件
        <div>測試</div>
        `,
        methods: {
           
        }
    }
    new Vue({
        el: '#app',
        data () {
            return {
                num: 0
            }
        },
        // 父子元件繫結
        components: {
            'son': son
        },
        mounted () {
            // 此處，可以通過 `this` 中的 `$refs` 來得到子元素中 `ref` 繫結的值，從而獲取到子元素的 `vue` 物件
            console.log(this.$refs.sonref.sun)
        }
    })
</script>