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

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