通常父子组件通过自组件获取父组件的props属性，自组件通过发射自定义事件$emit传递给父组件，代码如下：
1.父组件：
<template>
<div id="app">
<ScrollBall
@input ='input' //父组件监听子组件的自定义事件
:value="start1"
:target="target"
color="green"></ScrollBall>
</div>
</template>
<script>
import ScrollBall from "./components/ScrollBall";
export default {
name: "app",
data() {
return {
start1: 100,
target:400
};
},
beforeUpdate(){
console.log(this.start1)
},
methods:{
input(value){
this.start1 = value;//监听子组件发射的$emit事件接收数据
},
components: {
ScrollBall
}
};
</script>
子组件代码如下：
<template>
<div>
<!-- 对象动态绑定 id 的获取通过计算属性获取相应的俩球的Id-->
<div class="ball" :style="style" :id="ballId"></div>
</div>
</template>
<script>
export default {
data(){
return {
pos:''
}
},
methods:{
stop(){
cancelAnimationFrame(this.timer);
}
},
mounted() {
// 子组件通知父组件修改数据
let ball = document.getElementById(this.ballId);
let fn = () => {
let left = this.value;
if(left>=this.target){
return cancelAnimationFrame(this.timer)
}
this.$emit('input',left+5); //向父组件发射事件传递数据
ball.style.transform = `translate(${left}px )`;
left+=5;
this.timer = requestAnimationFrame(fn);
};
this.timer = requestAnimationFrame(fn);
},
props: {
value: {
type: Number,
default: 0
},
target: {
type: Number,
default: 300
}
},
computed: {
style() {
return { background: this.color };
},
ballId() {
return "ball" + this._uid;
}
}
};
</script>
2.父组件：
<template>
<div id="app">
<ScrollBall
v-model="start1" //这里通过v-model相当于@input ='input' 这里监听input在方法中注释也会达到1的效果，1和2的例子原理一样，只不过省很多代码，方法也可以不用，1必须有方法
:target="target"
color="green"></ScrollBall>
</div>
</template>
<script>
import ScrollBall from "./components/ScrollBall";
export default {
name: "app",
data() {
return {
start1: 100,
target:400
};
},
methods:{
// input(value){
// this.start1 = value;
// },
},
components: {
ScrollBall
}
};
</script>
子组件代码如下：
let ball = document.getElementById(this.ballId);
let fn = () => {
let left = this.value;
if(left>=this.target){
return cancelAnimationFrame(this.timer)
}
this.$emit('input',left+5); //向父组件发射事件传递数据 //和例1的子组件代码一致只不过父组件通过v-model不用时间监听子组件发射的input
ball.style.transform = `translate(${left}px )`;
left+=5;
this.timer = requestAnimationFrame(fn);
};
this.timer = requestAnimationFrame(fn);
},
props: {
value: {
type: Number,
default: 0
},
target: {
type: Number,
default: 300
}
},
computed: {
style() {
return { background: this.color };
},
ballId() {
return "ball" + this._uid;
}
}
};
</script>
3. 父组件：
<template>
<div id="app">
<ScrollBall
ref = 'ball'
@input ='input'
:value.sync = 'start1' // 父组件代码加sync同步属性这段代码相当于 @update:value = 'input'
:target="target"
color="green"></ScrollBall>
</div>
</template>
<script>
import ScrollBall from "./components/ScrollBall";
export default {
name: "app",
data() {
return {
start1: 100,
target:400
};
},
methods:{
input(value){
this.start1 = value;
},
},
components: {
ScrollBall
}
};
</script>
子组件代码：
<template>
<div>
<!-- 对象动态绑定 id 的获取通过计算属性获取相应的俩球的Id-->
<div class="ball" :style="style" :id="ballId"></div>
</div>
</template>
<script>
// props+$emit
// v-model = @input = 'input'+:value = ''
// .sync = :xxx ='xxx' @update :xxx 子组件$emit('update:xxx',数据)
export default {
data(){
return {
pos:''
}
},
methods:{
stop(){
cancelAnimationFrame(this.timer);
}
},
mounted() {
// 子组件通知父组件修改数据
console.log(this)
let ball = document.getElementById(this.ballId);
/*ball.style.transform = `translate(${this.start}px)`;
let left = this.start;
setInterval(()=>{
left+=5;
ball.style.transform = `translate(${left}px )`
},200)*/
let fn = () => {
let left = this.value;
if(left>=this.target){
return cancelAnimationFrame(this.timer)
}
// console.log(left)
// this.$emit('input',left+5);
this.$emit('update:value',left+5) // 子组件通过update:value这个固定写法通知父组件修改数据
ball.style.transform = `translate(${left}px )`;
left+=5;
this.timer = requestAnimationFrame(fn);
};
this.timer = requestAnimationFrame(fn);
},
props: {
color: {
type: String,
default: "white"
},
value: {
type: Number,
default: 0
},
target: {
type: Number,
default: 300
}
},
computed: {
style() {
return { background: this.color };
},
ballId() {
return "ball" + this._uid;
}
}
};
</script>