Vue.js組件傳值

子組件向父組件傳值

在子組件頁面觸發事件$emit

<template>
   <el-button @click="returnNews">回傳給父組件</el-button>
   <el-input v-model="returnMsg"></el-input>
</template>
<script>
export default {
    data() {
        return {
            returnMsg:'',
        }
    },
    methods:{
        returnNews:function(){
            this.$emit("sendMsg",this.returnMsg);
        },
    },
}
</script>
//經過button按鈕的點擊事件，將控件中輸入的值綁定到returnMsg上
//this.$emit("sendMsg",this.returnMsg);sendMsg是父組件須要的方法名，this.returnMsg是傳遞的值

在父組件中在組件標籤中調用v-on事件監聽

<template>
   <span>子組件回傳來的值：{{news}}</span>
   <Childen1 v-on:sendMsg="returnMsg"> </Childen1>
</template>
<script>
import Childen1 from './Childen1';
export default {
    data() {
        return {
            news:'',
        }
    },
    components: {
        'Childen1': Childen1,
    },
    methods:{
        returnMsg:function(val){
            this.news=val;
        }
    },
}
</script>

父組件向子組件傳值

//PartView1 表示子組件
//new_name是子組件中用來接受父組件傳值的參數名
<div class="item">
    <PartView1 :new_name="name"></PartView1>
</div>

data() {
    return {
        name:'hello',//給name賦值爲hello
    }
},

在子組件中接受傳來的參數

props: {
  new_name:'',
},