# 组件之间通信 可以通过 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
# 尽量通过修改父组件的数据,来跟新子组件

vue 父子组件 基础应用scrollball v-model sync的更多相关文章

  1. vue父子组件传值加例子

    例子:http://element-cn.eleme.io/#/zh-CN/component/form         上进行改的 父传子:用prop:子组件能够改变父组件的值,是共享的,和父操作是 ...

  2. 关于Vue父子组件传值(复杂数据类型的值)的细节点

    vue 父子组件传值是很常见的,多数情况下都是父传递给子的值是基础数据类型,如string,number,boolean, 当父组件值被修改时,子组件能够实时的作出改变. 如果父子传值的类型是复杂数据 ...

  3. vue父子组件状态同步的最佳方式续章(v-model篇)

    大家好!我是木瓜太香!一名前端工程师,之前写过一篇<vue父子组件状态同步的最佳方式>,这篇文章描述了大多数情况下的父子组件同步的最佳方式,也是被开源中国官方推荐了,在这里表示感谢! 这次 ...

  4. vue父子组件之间传值

    vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...

  5. vue父子组件的传值总结

    久违的博客园我又回来了.此篇文章写得是vue父子组件的传值,虽然网上已经有很多了.写此文章的目的就是记录下个人学习的一部分.接下来我们就进入主题吧! 在开发vue项目中,父子组件的传值是避免不掉的. ...

  6. 【转】vue父子组件之间的通信

    vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使 ...

  7. Vue父子组件生命周期

    转载自:https://blog.csdn.net/a8725585/article/details/79092505 vue父子组件钩子函数触发顺序 beforeMount后mounted前构造子组 ...

  8. vue 父子组件通信详解

    这是一篇详细讲解vue父子组件之间通信的文章,初始学习vue的时候,总是搞不清楚几个情况 通过props在父子组件传值时,v-bind:data="data",props接收的到底 ...

  9. Vue父子组件数据双向绑定,子组件可修改props

    第一种,子组件通过监听父组件数据,子组件改变数据之后通知给父组件 原文链接:https://blog.csdn.net/m0_37728716/article/details/81776929 父组件 ...

随机推荐

  1. cs231n spring 2017 lecture10 Recurrent Neural Networks

    (没太听明白,下次重新听一遍) 1. Recurrent Neural Networks

  2. 吴裕雄--天生自然Android开发学习:下载安装android stuio集成开发工具

    下载链接: https://developer.android.google.cn/index.html

  3. LintCode排序

    1.LintCode整数排序 给一组整数,按照升序排序,使用选择排序,冒泡排序,插入排序或者任何 O(n2) 的排序算法. 您在真实的面试中是否遇到过这个题?  是 样例 对于数组 [3, 2, 1, ...

  4. caffe之数据集介绍

    数据集:http://bigdata.51cto.com/art/201702/531276.htm 计算机视觉 MNIST: 最通用的健全检查.25x25 的数据集,中心化,B&W 手写数字 ...

  5. 配置gitlab(备忘)

    已经配置好github的基础上,clone gitlab 地址git status 显示改变了的文件但是webstorm文件颜色不改变问题的解决:VCS->git-->remotes--& ...

  6. Hibernate中的对象图关系转换:游离、持久、自由状态

  7. 由生到死10个月!做App中的“二”有多难

    十月,原本是怀胎过程的喜悦时光,但这段个时光,如今却是绝大多数App从生到死的所有时间.在App市场表面形式一片大好,彻底主宰我们生活.工作.娱乐的当下,绝大多数用户只是在App海洋中只取一瓢饮,其他 ...

  8. SWUST OJ 有趣的三位数(0319)

    有趣的三位数(0319) Time limit(ms): 1000 Memory limit(kb): 65535 Submission: 158 Accepted: 62   Description ...

  9. Mongdb创建 连接过程

    在bin目录下启动后 Show dbs 显示库,库里有内容才会显示库名称 Use admin 切换库 没有的默认创建 show users显示用户信息 Show collections显示表名 db. ...

  10. 《自动化平台测试开发-Python测试开发实战》第2次印刷

    书籍货源比较紧张.紧张啊,如此短的时间,已经第2次印刷.第2次印刷. 第2次印刷. 同时该书已确认与台湾出版社合作翻译成繁体版,甚至有可能与国外出版社合作翻译成英文版. 2018年7月 第1次印刷 2 ...