Vue 父子組件傳值

新建子組件

新建一個模板對象com1，然後在vm中的components裏註冊一下，就可以使用com1標籤了，標籤內容就是子元素的內容。

//子組件
var com1 = {
	template: '#tmp1'
}
//父組件
var vm = new Vue({
	el: '#app',
	components: {
		com1
	}
})

在父元素中使用com1標籤，就可以顯示子元素的內容了

//父元素
<div id="app"> 
	<com1></com1>
</div>
//子元素
<template id="tmp1">
	<div>
		<h2>我是子元素</h2>
	</div>
</template>

父組件向子組件傳值

用屬性傳值: 用v-bind定義一個名字獲取父組件的msg

<div id="app">
	<com1 :parentmsg="msg" ></com1>
</div>

然後子組件通過props定義一下parentmsg，然後把parentmsg放在子元素就能顯示了

<template id="tmp1">
	<div>
		<h2>我是子元素 --- {{ parentmsg }}</h2>
	</div>
</template>

<script>
	var com1 = { // 子組件
		template: '#tmp1',
		props:['parentmsg'] //用props定義一下v-bind綁定的parentmsg，子元素就可以使用了
	}
	var vm = new Vue({  // 父組件
		el: '#app',
		data: {
			msg: '這是父組件的數據'
        },
        components: {
            com1
        }
    })
</script>

子組件向父組件傳值

在父元素定義一個方法，當子組件調用這個方法的時候，就會傳過來一個參數（data），這個參數就是子組件的數據。獲取數據放到data裏輸出就好了。

子元素點擊sentdMsg（），通過$emit（）方法調用func函數，並把子元素的msg傳到參數data中

//父元素
<div id="app">
	<com1 :parentmsg="msg" @func="getMsgFormSon"></com1>
</div>
//子元素
<template id="tmp1">
	<div>
        <h2>我是子元素 --- {{ parentmsg }} </h2>
        <input type="button" value="向父組件傳遞的內容" @click="sendMsg">
    </div>
</template>

<script>
    var com1 = {  // 子組件
        template: '#tmp1',
        data() {
            return {
                msg: 'i am 子組件'
            }
        },
        props: ['parentmsg'], //用props定義一下v-bind綁定的parentmsg，子元素就可以使用了
        methods: {
            sendMsg() {  //點擊函數觸發事件
                this.$emit('func', this.msg) //使用$emit方法調用func函數並吧msg帶過去
            }
        }
    }
    var vm = new Vue({  // 父組件
        el: '#app',
        data: {
            msg: '這是父組件的數據',
            msgFormSon: ''  //用來存放子元素數據
        },
        methods: {
            getMsgFormSon(data) {  //當子元素調用這個方法的時候執行，並帶過來data參數（也就是子元素的值）
                this.msgFormSon = data  //獲取到子元素的值保存到data裏
                console.log(this.msgFormSon)
            }
        },
        components: {
            com1
        }
    })
</script>