Vue2.0 组件components

组件三部曲定义组件-->注册组件-->使用组件

案例思路：


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script src="../js/vue.js">script>
		<script src="../components/step.js">script>
	head> 
	<body>
		<div id="app">
			
			<h1>组件传参h1>
			<p>父传子p>
			
			<step :value="r" @input="r=$event" :min="100" :max="500" :step="10">step><br>
			<input type="range" :min="100" :max="500" v-model.number="r">
			<div :style="{'border':'2px solid red',borderRadius:r+'px',height:r+'px',width:r+'px'}">div>
		div>
		<script>
			 new Vue({
				 el:"#app",
				 // 02注册组件
				 components:{step},
				 data(){
					 return{
						 r:100,
					 }
				 }
			 })
		script>
	body>
html>


// 01定义组件
var step = {
	template: `
				 
				 
				 
				 `,
	props: { //props接受父组件传递过来的参数  父传子
		value: { //参数名称value
			type: Number,
			default: 1 //默认值是1  如果不传value的值是1
		},
		min: {
			type: Number,
			default: 1
		},
		max: {
			type: Number,
			default: 999
		},
		step: {
			type: Number,
			default: 1
		}
	},
	data() {
		return {
			count: this.value //count的默认值是父组件传过来的参数value
		}
	},
	watch: {
		count: {
			handler() {
				// 限定最大值  最小值
				if (this.count >= this.max) {
					this.count = this.max
				};
				if (this.count <= this.min) {
					this.count = this.min
				};
				//子传父 通过emit发送事件
				this.$emit("input", this.count);
 
			},
			deep: true,
		},
		value: {
			handler() {
				this.count = this.value;
			},
			deep: true
		}
	}
 
}
//为什么不直接使用this.value和input框绑定
// 因为 父组件传到子组件的参数必须是只读
// 当count的数据局发生变化时通知父组件更新数据

相关阅读:
Maven项目和Gradle项目相互转换
虚幻引擎:如何使用独立进程模式进行模拟
Linux常用命令大全（非常全面）
我问老大：TCP 四次挥手，可以变成三次吗？
开放式运动耳机哪款好，盘点几款目前最好的开放式耳机分享
国外资源加速下载器，代码全部开源
argparse.ArgumentParser() 用法解析
Android开发重大新闻，安卓手机将不能无视风险安装APP
【UE5：CesiumForUnreal】——加载无高度地形数据
在SpringBoot项目中整合SpringSession，基于Redis实现对Session的管理和事件监听

原文地址：https://blog.csdn.net/promise466/article/details/127028599

Vue2.0 组件components

组件三部曲 定义组件-->注册组件-->使用组件

组件三部曲定义组件-->注册组件-->使用组件