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:'',
},

转载于:https://www.cnblogs.com/CurryZhang/p/7550516.html