vue2.0 父子组件通信传值

原创于 2019-03-15 14:42:23 发布 · 148 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了Vue.js中父组件与子组件之间的数据传递及事件触发机制。通过具体实例展示了如何在子组件中接收父组件的数据，并在子组件触发事件后将数据回传给父组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件：

<my-productlist :dataArr="productListData" @childEvent = 'toDetail'></my-productlist>

<script>
    import myProductlist from '../components/productList.vue';
    export default{
    data(){
        return{
            productListData:[.....]    //数据
        }
    }
    methods:{
		toDetail(data){
			console.log('子组件点击传过来的值：'+data)
		}
	},
    components: {  
            myProductlist
        }, 
    }   
</script>

子组件接收值并传递事件：

<div id="wrap" class="listView">
	<div class="list-item" v-for="(v,i) in productList" :key="i" @click="_toDetail(i)">{{v}}</div>
</div>

<script>
    export default{
		props:['dataArr'],       //props接收父组件的值
		data(){
			return{
				productList:this.dataArr
			}
		},
		methods:{
			_toDetail(i){
				this.$emit('childEvent',i)       //传递触发事件
			}
		}
	}
</script>