父元件傳值

在vue中，子元件中預設無法訪問到父元件中data的資料和methods中的方法。 通過屬性繫結(v-bind)的形式 可以把父元件的資料傳遞給子元件

<div id='app'>
	<!-- com1:子元件-->
    <com1 :parentmsg='msg'></com1>
</div>

 var vm = new Vue({
        el: '#app',
        data: {
            msg: "---父元件中的資料---"
        }
        components:
 
 {
            com1: {
                data: function () {
                    return {
                        title: '123',
                        content: '啦啦啦'
                    }
                },
                template: "<h1>這是子元件{{parentmsg}}</h1>",
                props: [ 
                // 在子元件props屬性中，定義父元件需要傳遞的資料
 

                    'parentmsg'
                ]
            }
        }
    })

子元件中data 和 props 區別1，data是子元件自身私有的，而props存放的是父元件傳遞過來的 子元件中data 和 props 區別2，data是可讀可寫的，而props是隻讀的

子元件呼叫父元件方法並傳遞資料給父元件

<div id='app'>
        <!-- 當我們自定義了一個事件屬性之後，子元件就能夠通過某些方式來呼叫了 -->
        <!-- 將父元件的show方法繫結給子元件 -->
 

        <com2 @func='show'></com2>
    </div>

    <template id='templ'>
        <div>
        	<!-- 子元件將在myclick方法中呼叫父元件方法 -->
            <input type="button" value="點選觸發父元件的show方法" @click='myclick'>
            <h1>這是子元件</h1>
        </div>
    </template>

 var com2 = {
        template: '#templ', 
        data: function () {
            return {
                sondata: { name: '紅貓', flag: '七劍之首' }
            }
        },
        methods: {
            myclick() {
                this.$emit("func", this.sondata)
                 // emit 代表觸發呼叫的意思,將子元件中的data資料傳遞給父元件
            }
        }
    }

    var vm = new Vue({
        el: '#app',
        data: {
            msg: "父元件中的資料",
            dataFromSon: null
        },
        methods: {
            show(data) {
                this.dataFromSon = data;
                console.log(this.dataFromSon)
            }
        },
        components: {
            com2: com2
        }
    })

使用$refs獲取DOM元素

	<div id='app'>
        <input type="button" value="獲取元素" @click='getElement'>
        <h1 id='myh1' ref='myh1'>今天天氣好好</h1>
    </div>

 var vm = new Vue({
        el: '#app',
        methods: {
            getElement() {
                console.log(this.$refs.myh1.innerHTML)  // 使用ref獲取dom元素
            }
        }
    })

使用$refs 獲取元件

在父元件中，通過$refs獲取子元件後，可以使用子元件的data資料和methods方法