vue 父子组件 基础应用scrollball v-model sync

# 组件之间通信 可以通过 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

# 尽量通过修改父组件的数据，来跟新子组件