vue 父子组件 基础应用scrollball v-model sync
2024-09-01 17:15:57
# 组件之间通信 可以通过 v-model 子组件可以通过 改变数据来改变父组件的数组
* v-model 子组件需要接受value属性，需要出发this.$emit("input","data");
v-model="posStart" === @input="input" :value="posStart" //"input" 底层自己实现 不用写
* sync 同步子组件与父组件的值 子组件需要接受 value1 的值,需要this.$emit("update:value1","data")
:value1.sync = "posStart" === @update:value1 ="input" :value1="posStart" //===后面的父组件需要写input函数 带sync不用写
* 传统的props $emit
# 父组件调用子组件的函数
* 如果是某一个特定的组件 在父组件调用子组件的地方加上ref,用this.$refs.refName.fn();
* 如果是需要调用所有子组件的方法，可以在父组件中使用$children,调用子组件的方法
1.父组件App
<template>
<div id="app">
<!--
<ScrollBall @input="input" :value="posStart" color="green" :target="posTarget"></ScrollBall>-->
<!-- v-model 底层 实现@input="input" :value="posStart" 父组件中不需要写 input函数 v-model底层会自己写赋值-->
<ScrollBall v-model="posStart" color="yellow" :target="posTarget"></ScrollBall>
<ScrollBall ref="ball2" :value.sync="posStart" color="red" :target="posTarget"></ScrollBall>
<!--
<ScrollBall @update:value1 ="input" :value1="posStart" color="red" :target="posTarget"></ScrollBall>
-->
<button @click="stopHandle"> stop </button>
</div>
</template> <script>
import ScrollBall from "./components/ScrollBall.vue";
export default {
name: "app",
beforeUpdate() {
// console.log(this.posStart);
},
data() {
return {
posStart: 160,
posTarget: 400
};
},
components: {
ScrollBall
},
methods: {
stopHandle(){
this.$children.forEach(ele=>{
ele.stop();
});
console.log(this.$children);
// this.$refs.ball2.stop();
}
/* input(value) {
this.posStart = value;
}*/
}
};
</script> <style lang="less">
</style>
2.子组件
<template>
<div class="ball" :style="style" :id="ballId"></div>
</template> <script>
export default {
name: "ScrollBall",
mounted(){
let ball = document.getElementById(this.ballId);
//页面加载后让小球运动
let fn = () => {
let left = this.value;
// console.log("left:",left);
if(left >= this.target){
return cancelAnimationFrame(this.timer);
}
// left += 5;
this.$emit("input",left+1); //交给父亲去改
this.$emit("update:value",left+1);
ball.style.transform = `translate(${left}px)`;
this.timer = requestAnimationFrame(fn);
}
this.timer = requestAnimationFrame(fn); //此函数只执行一次
},
props: {
color: {
type: String,
default:"white"
},
value:{
type:Number,
default:0
},
target:{
type:Number,
default:0
}
},
computed: {
style(){
return {background:this.color}
},
ballId(){
return "ball"+this._uid;
}
},
methods:{
stop(){
cancelAnimationFrame(this.timer);
}
}
};
</script>
<style lang="less">
.ball {
width: 100px;
height: 100px;
border: 1px solid #000;
border-radius: 50%;
box-sizing: border-box;
}
</style>
涉及的知识点：
vue-cli生成的目录结构
vue create name
node_modules 第三方包存储目录s
public 静态资源 已被托管
src 源代码
-assets 资源目路 存放静态资源
-components 存储其他组件的目录
-App.vue 根组件
-main.js 入口文件
.gitignore git 忽略文件
.vue单文件组件
template 组件的模板
注意 只有一个根节点
script 组件的js 配置组件选项
style scoped 作用域 我的样式只用于当前的组件，不加就是全局的样式
vue组件开发基本使用
scrollball
# 不用创建项目 vue 应用 # npm install -g @vue/cli-service-global
## 完了之后用vue serve
# 创建项目 vue create vue-apply
# 父组件传递背景颜色给子组件 ：子组件接受颜色后，需要动态绑定 :style={background:color} 可以用计算属性 :style='stlyleComputed'
# 父组件传值的时候带上：是本身变量，不带是字符串
# 子组件修改父组件的值$emit ，父组件绑定事件用@
# 可以用requestAnmiationFrame来代替setTimeout
# 尽量通过修改父组件的数据，来跟新子组件
最新文章
- Interleaving String
- Java字节数组转按radix进制输出
- HTML 透明、阴影，圆角等知识点
- windows phone之获取当前连接WIFI的SSID
- “-="的陷阱
- 【solr这四个主题】大约VelocityResponseWriter
- https post
- c oth
- djangoueditor 集成xadmin
- c# txt文件的读取和写入
- 一句话HTML编辑器
- 关于kafka生产者相关监控指标的理解（未解决）
- fetch 的控制器和观察者
- dubbo线程模型
- MVP 实践
- MySQL免安装版，遇到MSVCR120.dll文件丢失错误的解决方案
- python爬虫——绕开杂乱无章的代码和堵住请求的302异常（2）
- SpriteKit 关于categoryBitMask collisionBitMask contactTestBitMask 遇到的一些问题
- SaaS产品成功学
- Django后端项目---- rest framework（3）