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

 1 <template>
 2   <div id="app">
 3     <!--
 4     <ScrollBall @input="input" :value="posStart" color="green"  :target="posTarget"></ScrollBall>-->
 5     <!-- v-model 底層 實現@input="input" :value="posStart" 父組件中不須要寫 input函數 v-model底層會本身寫賦值-->
 6     <ScrollBall v-model="posStart" color="yellow" :target="posTarget"></ScrollBall>
 7     <ScrollBall ref="ball2" :value.sync="posStart" color="red" :target="posTarget"></ScrollBall>
 8     <!--
 9     <ScrollBall @update:value1 ="input" :value1="posStart"  color="red" :target="posTarget"></ScrollBall>
10     -->
11     <button @click="stopHandle"> stop </button>
12   </div>
13 </template>
14 
15 <script>
16 import ScrollBall from "./components/ScrollBall.vue";
17 export default {
18   name: "app",
19   beforeUpdate() {
20   //  console.log(this.posStart);
21   },
22   data() {
23     return {
24       posStart: 160,
25       posTarget: 400
26     };
27   },
28   components: {
29     ScrollBall
30   },
31   methods: {
32     stopHandle(){
33       this.$children.forEach(ele=>{
34         ele.stop();
35       });
36       console.log(this.$children);
37     //  this.$refs.ball2.stop();
38     }
39   /*  input(value) {
40       this.posStart = value;
41     }*/
42   }
43 };
44 </script>
45 
46 <style lang="less">
47 </style>

 

2.子組件

 1 <template>
 2   <div class="ball" :style="style" :id="ballId"></div>
 3 </template>
 4 
 5 <script>
 6 export default {
 7   name: "ScrollBall",
 8   mounted(){
 9     let ball = document.getElementById(this.ballId);
10    //頁面加載後讓小球運動 
11     let fn = () => {
12         let left = this.value;
13       //  console.log("left:",left);
14         if(left >= this.target){
15             return cancelAnimationFrame(this.timer);
16         }
17       //  left += 5;
18         this.$emit("input",left+1); //交給父親去改
19         this.$emit("update:value",left+1);
20         ball.style.transform = `translate(${left}px)`;
21         this.timer = requestAnimationFrame(fn);
22     }
23     this.timer = requestAnimationFrame(fn); //此函數只執行一次
24   },
25   props: {
26     color: {
27       type: String,
28       default:"white"
29     },
30     value:{
31       type:Number,
32       default:0
33     },
34     target:{
35       type:Number,
36       default:0
37     }
38   },
39   computed: {
40     style(){
41       return {background:this.color}
42     },
43     ballId(){
44       return "ball"+this._uid;
45     }
46   },
47   methods:{
48     stop(){
49        cancelAnimationFrame(this.timer);
50     }
51   }
52 };
53 </script>
54 <style lang="less">
55 .ball {
56   width: 100px;
57   height: 100px;
58   border: 1px solid #000;
59   border-radius: 50%;
60   box-sizing: border-box;
61 }
62 </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

# 儘可能經過修改父組件的數據，來跟新子組件