\r\n
\r\n <%%/template%%>\r\n `,\r\n style: commonStyle,\r\n data: {\r\n key:1,\r\n },//数据对象，用于驱动视图更新，数据变化，视图自动更新\r\n methods: {\r\n \r\n },\r\n watch:{\r\n\r\n }\r\n\r\n })\r\n rv.run(()=>{\r\n console.log(\"rv.run\")\r\n })\r\n```\r\n\r\n二. 声明组件以及使用组件:\r\n\r\n0. 参数说明:\r\n\r\n```\r\nRV.component用于声明组件的方法,\r\nRV组件构造函数形参componentParam对象属性name 为RV组件名字\r\n\r\nRV组件构造函数形参componentParam对象属性template 为RV组件html声明模板 （::属性绑定方法到组件）\r\n\r\nRV组件构造函数形参componentParam对象属性style 为RV组件声明css样式\r\n\r\nRV组件构造函数形参componentParam对象属性props 为RV组件属性,目的为暴漏给父控件用于设置组件相应参数\r\n\r\nRV组件构造函数形参componentParam对象属性data 为RV组件data\r\n\r\nRV组件构造函数形参componentParam对象属性methods，为RV组件method对象，在对象中创建方法以及回调。其中方法中的this指向此组件\r\n\r\nRV组件构造函数形参componentParam对象属性onRun 为RV组件生命周期，组件运行时候触发，只执行一次\r\n\r\nRV组件构造函数形参componentParam对象属性onDomChange为RV组件生命周期，虚拟dom应用真实数据之前调用\r\nRV组件构造函数形参componentParam对象属性onInit为RV组件生命周期，第一次虚拟dom应用真实数据之前调用\r\nRV组件构造函数形参componentParam对象属性onMount为RV组件生命周期，组件挂载时触发\r\nRV组件构造函数形参componentParam对象属性onUnMount为RV组件生命周期，组件卸载时触发\r\n\r\nRV组件构造函数形参componentParam对象属性watch为RV组件对象，用于观察组件data数据变化\r\n\r\nRV组件对象函数内调用this.$emit({name,value},toParent?) 发送事件到其他组件 ,name为事件名称,value为事件值.toParent是否将此事件发送到父组件 默认true\r\n\r\nRV组件对象函数内调用this.$on(event,(value)=>{},fromParent?) 组件监听其他组件发送的事件，event为事件名,value为事件传过的值,from是否为从父组件注册监听事件 默认false\r\n\r\nRV组件对象函数内调用this.$ref(componentName,componentKey?)访问组件,可以访问子组件的方法。componentName已用use方法注册过组件名，componentKey已用use方法注册过组件key.默认true\r\nRV组件对象函数内调用this.$routeChange({path,paramObj},parentRouteChange?) 发送路由改变事件，更新页面组件。（仅用于组件为页面）需要在路由配置文件中注册组件.parentRouteChange为true时发送路由改变到父页面组件，否则发送到当前页面组件\r\nRV组件对象函数内调用this.$getRouteInfo() 获取组件路由信息，返回{prevPath,path,param}信息\r\nRV组件对象函数内调用this.getComponentUniqueTag() 获取组件唯一标记\r\n\r\nRV组件对象函数内调用this.getParentComponentName() 获取当前组件父组件名字\r\n\r\nRV组件模板插槽标签slot，slot标签name属性用于区分插槽，如果组件内只有一个插槽这不需要name属性\r\n\r\n\r\n```\r\n\r\n![](\"./rvTheLifeCycle.png\")
\r\n\r\n1.声明组件:\r\n通过 RV.component 声明组件\r\n任何组件都可以通过 use(component,key?)方法注册已经声明好的的 rv 组件,component为rv组件，key为组件唯一标识，一个组件内使用多次相同组件用key区分\r\n\r\n```javascript\r\n var con = RV.component({ //定义自定义RV组件\r\n name: \"MyComponent\",//定义RV组件名字\r\n template: `\r\n <%%template%%>\r\n \r\n
\"%#pcontent#%\"
\r\n\r\n <%%/template%%> \r\n `,//定义RV组件,HTML语法声明组件模板\r\n style: `\r\n <%%style%%>\r\n .aaa {\r\n background-color: red\r\n }\r\n .bbb {\r\n width: 500px;\r\n height:200px;\r\n }\r\n <%%/style%%>\r\n `,//定义RV组件样式表,css语法声明组件样式\r\n props: {//定义RV组件属性,用于外部设值组件属性\r\n time: \"1000\",\r\n content: \"a custom component\",\r\n value: \"componentValue\"\r\n },\r\n data: {//定义RV组件data,data数据变化，自动更新模板内容\r\n pcontent: \"a custom component\",\r\n pcolor: \"yellow\",\r\n time: 10000,\r\n pvalue: \"cvalue\"\r\n\r\n },\r\n methods:{\r\n test1(){\r\n //其中this指向此组件\r\n this.methods.test2()\r\n }\r\n test2(){\r\n this.method.clickMyCon() //此方法通过::属性绑定到此组件\r\n\r\n }\r\n }\r\n onRun() {//定义自定义RV组件运行代码,用于运行RV组件相关JS代码,RV组件启动时启动此方法\r\n\r\n\r\n\r\n let colors = ['red', 'green', 'blue', 'yellow', 'gray', 'white', 'black']\r\n\r\n setInterval(() => {\r\n this.data.pcontent = this.props.content\r\n this.data.time = this.props.time\r\n this.data.pvalue = this.props.value\r\n this.data.pcolor = colors[getRandomInt(6)]\r\n\r\n /*将此组件的color值变化发送到其他组件\r\n 其他组件在method中声明组件名+事件值+'event'方法接收此变化\r\n $on(\"Color\",(color)=>{\r\n 此事件在组件调用this.$emit({name:\"Color\",value:this.data.pcolor})时触发\r\n })\r\n */\r\n this.$emit({name:\"Color\",value:this.data.pcolor})\r\n\r\n\r\n }, 1000)\r\n function getRandomInt(max) {\r\n return Math.floor(Math.random() * Math.floor(max));\r\n }\r\n\r\n },\r\n onDomChange(){\r\n //dom 变化时触发，用于运行dom相关代码\r\n },\r\n watch: {\r\n pcolor() {\r\n console.log(`pcolorChange,change:`)\r\n\r\n }\r\n },\r\n onMount(){\r\n //组件挂载时候调用\r\n }\r\n onUnMount(){\r\n //组件卸载时调用\r\n }\r\n onInit(){\r\n //用于初始化组件属性\r\n }\r\n\r\n\r\n })\r\n```\r\n\r\n2. 使用组件:\r\n 通过 rv.use 注册自定义组件到当前 RV 对象中,在 RV template 中使用注册过的组件名字声明组件。\r\n 组件可以使用 use 方法注册其他 rv 组件到当前组件中。\r\n\r\n```javascript\r\nrv = new RV({\r\n //创建对象\r\n el: \"#app\",\r\n //el对象挂载的节点s\r\n data: myData,\r\n template: `\r\n <%%template%%>\r\n
\r\n \"%#parent#%\"\r\n \r\n \r\n
\r\n <%%/template%%> \r\n `,\r\n // MyComponent为自定义RV组件名字，定义组件时name值.content,value,time为定义组件时属性,定义组件时props值\r\n methods:{\r\n $on(\"Color\",(color)=>{\r\n //组件MyComponent调用this.$emit({name:\"Color\",value:this.data.pcolor}) 会触发此函数，color为新值\r\n //this指向本组件,通过this可以访问本组件\r\n this.methods.fun1()\r\n })\r\n fun1(){\r\n\r\n },\r\n fun2(){\r\n //此方法绑定到MyComponent组件clickMyCon方法上\r\n }\r\n\r\n\r\n}\r\n\r\n});\r\n\r\nrv.use(con); //调用rv对象的use方法注册自定义组件\r\n```\r\n\r\n# [DEMO](https://github.com/yhongm/rvDemo)\r\n","readmeFilename":"README.MD"}\r\n \"%#child#%\"\r\n
\r\n\r\n \"%#child2#%\"\r\n
\r\n\r\n
\r\n \"%#v.content#%\"
\r\n\"插槽demo\"
\r\n