vue父子组件

子组件

在项目中新建子组件用于放子组件

父组件

在pages中的页面都是父组件

注册

局部注册：

在父组件中：

<script>
import Son from '../../con/Son.vue'
export default {
	components:{
	Son
	}
}

</script>

全局注册：

在main.js 文件中

import Son from './con/Son.vue'

Vue.component('Son', Son)

父传子

父组件中

<template>
	<view class="content">
		<Son :chuan='num' > </Son>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 46
			}
		}
}

在子组件中

<template>
 <view class="content">
	<view>{{chuan}} </view>
 </view>
</template>

<script>
	export default{
		//第一种接受方式
		props:['chuan']
		//第二种接收方式
		props:{
			type:Object\Number\String
		}

	}
</script>

子传父

在子组件中

<template>
 <view class="content"> 
	<view>{{chuan}} </view>
 </view>
<button @click="sendF">传给父</button>
</template>

<script>
	export default{
		//第一种接受方式
		props:['chuan']
		//第二种接收方式
		props:{
			type:Object\Number\String
		},
		data(){
			return{
				num:1
			}
		},
		methods:{
			sendF(){
			this.$emit('dianji',this.num)
			}		
	}


</script>

在父组件中

<template>
	<view class="content">
		<Son :chuan='num' @sendF='getF'> </Son>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 46
			}
		},
		methods:{
			getF(num){
				console.log('父组件接受到了', num)
			}
		}
}