# Between the components of the communication can be changed by changing the parent component array data v-model subassembly
* V-model sub-components need to accept the value property, we need to start this $ emit ( "input", "data").;
v-model = "posStart" === @ input = "input": value = "posStart" // "input" to achieve their own do not have the underlying write
* The value of the synchronization subassembly subassembly sync components need to accept the parent value of value1, you need this $ emit. ( "Update: value1", "data")
: Value1.sync = "posStart" === @update: value1 = "input": value1 = "posStart" // === parent component behind the need to write a function with input sync without writing
* Traditional props $ emit
# Call the parent component sub-assemblies function
* If a particular component in place the parent component calls subcomponents plus ref, with this $ refs.refName.fn ().;
* If you need to call all the methods subcomponents, you can use $ children in parent components, sub-components of the method call
1. The parent component App
1 <template> 2 <div id="app"> 3 <!-- 4 <ScrollBall @input="input" :value="posStart" color="green" :target="posTarget"></ScrollBall>--> 5 <!-- v-model 底层 实现@input="input" :value="posStart" 父组件中不需要写 input函数 v-model底层会自己写赋值--> 6 <ScrollBall v-model="posStart" color="yellow" :target="posTarget"></ScrollBall> 7 <ScrollBall ref="ball2" :value.sync="posStart" color="red" :target="posTarget"></ScrollBall> 8 <!-- 9 <ScrollBall @update:value1 ="input" :value1="posStart" color="red" :target="posTarget"></ScrollBall> 10 --> 11 <button @click="stopHandle"> stop </button> 12 </div> 13 </template> 14 15 <script> 16 import ScrollBall from "./components/ScrollBall.vue"; 17 export default { 18 name: "app", 19 beforeUpdate() { 20 // console.log(this.posStart); 21 }, 22 data() { 23 return { 24 posStart: 160, 25 posTarget: 400 26 }; 27 }, 28 components: { 29 ScrollBall 30 }, 31 methods: { 32 stopHandle(){ 33 this.$children.forEach(ele=>{ 34 ele.stop(); 35 }); 36 console.log(this.$children); 37 // this.$refs.ball2.stop(); 38 } 39 /* input(value) { 40 this.posStart = value; 41 }*/ 42 } 43 }; 44 </script> 45 46 <style lang="less"> 47 </style>
2. subcomponents
1 <template> 2 <div class="ball" :style="style" :id="ballId"></div> 3 </template> 4 5 <script> 6 export default { 7 name: "ScrollBall", 8 mounted(){ 9 let ball = document.getElementById(this.ballId); 10 //页面加载后让小球运动 11 let fn = () => { 12 let left = this.value; 13 // console.log("left:",left); 14 if(left >= this.target) { 15 return cancelAnimationFrame ( the this .timer); 16 } . 17 // left + =. 5; 18 is the this . $ EMIT ( "INPUT", left +. 1); // to Father to change . 19 the this . $ EMIT ( "Update: value", left +. 1 ); 20 is ball.style.transform = `Translate ($ {left} PX)`; 21 is the this .timer = requestAnimationFrame (Fn); 22 is } 23 is the this .timer requestAnimationFrame = (Fn ); // this function is performed only once 24 }, 25 The props: { 26 is color: { 27 type: String, 28 default:"white" 29 }, 30 value:{ 31 type:Number, 32 default:0 33 }, 34 target:{ 35 type:Number, 36 default:0 37 } 38 }, 39 computed: { 40 style(){ 41 return {background:this.color} 42 }, 43 ballId(){ 44 return "ball"+this._uid; 45 } 46 }, 47 methods:{ 48 stop(){ 49 cancelAnimationFrame(this.timer); 50 } 51 } 52 }; 53 </script> 54 <style lang="less"> 55 .ball { 56 width: 100px; 57 height: 100px; 58 border: 1px solid #000; 59 border-radius: 50%; 60 box-sizing: border-box; 61 } 62 </style>
Involving knowledge points:
vue-cli generated directory structure
vue create name
node_modules third-party package storage directory s
public static resources have been hosted
src source
-assets resources Head Road store static resources
Other components of the storage directory -components
-App.vue root component
-main.js entry file
.gitignore git ignore file
.vue single-file assembly
Template template components
Note that only a root node
js script component configuration component options
Style style scoped scoped my style only for the current component, that is, without the global
vue use basic component development
scrollball
Instead of creating a project application vue # # npm install -g @ vue / cli-service-global
After ## finished with vue serve
# Create a project vue create vue-apply
# Parent component subassembly to pass background color: After receiving the color sub-assembly, required dynamic binding: style = {background: color} can be calculated attributes: style = 'stlyleComputed'
# Parent component value when the pass band: variable per se, without the string
# Subassembly modify the parent component value $ emit, parent component binding event with @
# Can be used instead of setTimeout requestAnmiationFrame
# As much as possible by modifying the parent component of the data, come with a new sub-assembly