vue中父組件給子組件傳值
（一）事件傳值
事件傳值在我理解也可以是父元素調用子元素的函數，背景是，當頁面元素有多個對話框，恰好每一個對話框又是一個子元素，父元素中某些按鈕控制對應的子元素對話框的開和關。
父組件：
<div style="background-col:#ccc;width:30px;height:30px;border:1px solid #ccc" @click="parentMethod">
<addwebsite ref="child1"></addwebsite> //子組件寫ref
</div>
import addwebsite from './addwebsite' //引入子組件
data() {
return {
flag:true //定義一個flag
}
}
components: {
addwebsite
}
methods:{
parentMethod() {
console.log(this.$refs.child1) //返回的是一個vue對象，所以可以直接調用其方法
this.$refs.child1.childMethod(this.flag) //調用子組件的函數，並把這個狀態傳過去。
}
}
子組件：
<template>
<div>
<Modal
v-model="modal1"
title="Common Modal dialog box title"
@on-ok="ok"
@on-cancel="cancel">
<p>Content of dialog</p>
<p>Content of dialog</p>
<p>Content of dialog</p>
</Modal>
</div>
</template>
上面的就是對話框 v-model綁定的值可以控制對話框的開或者關
<script>
export default {
data () {
return {
modal1: false //對話框的初始值，也就是初始開關的狀態
}
},
methods:{
childMethod(flag) { //這個就是子組件的函數 參數是父組件調用時傳過來的
this.modal1 = flag; //將這個狀態賦給當前的對話框所綁定data數據上
}
},
}
</script>
(二)屬性傳值
父組件：
<div id='app'>
<com1 :parentmsg="msg"></com1> //parentmsg 自定義一個屬性來存放值
</div>
import com1 from './com1'
data:{
msg:'123-我是父組件中的數據' //父組件要向子組件傳的數據
},
子組件：
首先
export default {
props:['parentmsg'] //子組件接收，也可以寫成props:{parentmsg：數據類型(string等),required:true}
}
<span>{{parentmsg}}</span> //子組件使用該值