vue常用的几个操作

组件的创建和应用

1.在components目录下新建组件
2.在需要用的组件上引入并挂载
3.使用标签

<template>    //1.创建
	<view>
		<view>我是一个子组件</view>
	</view>
</template>

<script>
	export default {
		name: "son",
		data() {
			return {
				num : 3,
			};
		},
	}
</script>

<style>

</style>

<template>
	<view class="content">
		<son></son>     //3.应用
	</view>
</template>

<script>
	import son from '../../components/son';   //2.引入
	export default {
		data() {
			return {
				title: '在变',
			}
		},
		onLoad() {
		},
		methods: {
			
		},
		components : {
			tab,           //2.挂载
			// list
		},
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	
</style>

组件之间的通讯

1. 父传子
   使用props

<template>
	<view>
		<view>我是一个子组件，我需要接收父组件流下来的数据。
			我就用了props属性.最后我就你那个不用在
			data中定义变量，就可以使用这个值
		</view>
		<view>
		我的data中没有定义age变量，这是父组件流下来的·{{age}}·
		</view>
	</view>
</template>

<script>
	export default {
		name: "son",
		data() {
			return {
				num : 3,
			};
		},
		props: {               //1.子元素设置props属性
			age: {}
		},
	}
</script>

<style>

</style>

<template>
	<view class="content">
		<son :age="title">  //2.使用子组件时，通过绑定给props的变量赋值
		</son>			
	</view>
</template>

<script>
	import tab from '../../components/tab';
	export default {
		data() {
			return {
				title: '在变',
				show : 0,
				mes:'',
				sonNum : 0
			}
		},
		onLoad() {
		},
		methods: {
		},
		components : {
			tab,
		},
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}	
</style>

2. 子传父

<template>
	<view class="content">	
		组件之间相互传递信息，父向子流数据
		<son :age="title"  @sendNum='resNum'> //4.将父元素与子元素相接
		</son>
	</view>
</template>

<script>
	import tab from '../../components/tab';
	export default {
		data() {
			return {
				title: '在变',
				show : 0,
				mes:'',
				sonNum : 0
			}
		},
		onLoad() {
		},
		methods: {               //3.父组件通过事件来接收
			resNum(num) {
				this.sonNum = num;
			}
		},
		components : {
			tab,
		},
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
</style>

<template>
	<view>
		<view class="toPapa" @click="toPapa()">   //2.添加一个动作
			点击我，我就将我的num=3给你(借助$emit)
		</view>
	</view>
</template>

<script>
	export default {
		name: "son",
		data() {
			return {
				num : 3,
			};
		},
		methods: {
			toPapa() {
				this.$emit('sendNum',this.num);   //1.使用$emit把自己的数据暴露出去
			}
		}
	}
</script>

<style>

</style>