vue使用组件修改子组件内容

vue页面中使用组件，修改组件中的部分内容

1. 在组件中首页写好组件内容以及样式

例：

在组件中的重要部分：name，props属性。

<template>
	<view class="pets-title">
		<h3>{{title}}</h3>
	</view>
</template>

<script>
	export default {
		name:"pets-title", //在vue页面中使用自组件的名称
		props:{
			title:{   //定义一个title属性
				type:String,     //定义属性类型
				default:"null"   //属性的默认值
			}
		}
	}
</script>

<style lang="scss" scoped>
	*{
		margin: 0;
		padding: 0;
	}
	.pets-title{
		width: 30%;
		padding: 6px 0;
		margin-top: 57rpx;
		border-radius: 4px;
		background-image: linear-gradient(to right,#fc9e2d,	#EE82EE);
		._h3{
			font-size: 22px;
			color: #efefef;
			text-align: center;
		}
	}
</style>

在vue页面中使用组件

1. 首页需要引入组件

import petsTitle from '@/components/pets/pets-title.vue'

2. 注册组件

components: {
				petsTitle
			},
		data() {
			return {
				title: 'XXX'
			}
		}

3. 在html中使用组件，使用组件的时候不能使用大写，如果有大写可以用 -
   把vue页面中定义的title的数据绑定到这里

<pets-title :title="XXX" />