组件传值

一. 父组件向子组件传值

通过props来实现, 子组件通过props来接收父组件传过来的值

1. 父组件

// 1. 引入子组件
import zi from '../../components/zi.vue'
// 2. 在components中对子组件进行注册
export default {
   components:{
    	zi
	} 
}

<!-- 以标签的形势载入; 通过数据绑定的形势进行传值 -->
<zi :userInfo="张三"></zi>

2. 子组件

//1.通过props接收父组件中传过来的值
props:['userInfo']

<!-- 2.在标签中直接使用 -->
<view>{{userInfo}}</view>

二. 子组件向父组件传值

子组件通过事件来向父组件传值

1. 子组件

<template>
	<view @click="send">
    	点击传值
    </view>
</template>
<script>
	export default{
        methods:{
            //点击事件
            send: function(){
                //向父组件传值
                this.$emit("sendData", "我是子")
            }
        }
    }
</script>

2. 父组件

<template>
	<view>
    	<zi @sendData="getData"></zi>
   	</view>
</template>

<script>
    //1.导入子组件
	import zi from '../../components/zi.vue';
    //2.注册子组件
    export dufault {
        components: {
            zi
        },
        methods: {
            getData: function(res){
                console.log(res) //我是子
            }
        }
    }
</script>