<template>
  <div id="app">
    <Box @mychange="fn" v-for="(item, i) in arr" 
    :key="item.id" 
    :employee="item.employee" 
    :salary="item.salary"
    :index="i"></Box>
    <p>總工資：{{total}}</p>
  </div>
 
</template>
 
<script>
import Box from "./Box.vue";
export default {
  data() {
    return {
      arr: [
        { id: 1, employee: "haha", salary: 3221 },
        { id: 2, employee: "xixi", salary: 4262 },
        { id: 3, employee: "yoyo", salary: 3122 }
      ]
    };
  },
  components: {
    Box
  },
  methods:{
    fn(newsalary,index){
     //父組件接收到子組件傳來(lái)的新值更新自己的數(shù)據(jù) 并重新傳值 刷新頁(yè)面
      this.arr[index].salary=newsalary
			this.$set(this.arr,index,this.arr[index])
    }
  },
  computed:{
    total(){
      let sum=0
      for (let i = 0; i < this.arr.length; i++) {
        sum+=this.arr[i].salary
      }
      return sum
    }
  }
};
</script>

<template>
	<div>
		<span>員工：{{employee}}  工資：{{salary}}</span>
		<button @click="change">漲工資</button>
	</div>
</template>
 
<script>
	export default {
		props:["employee","salary","index"],
		methods:{
			change(){
				let newsalary=this.salary+500
                 //觸發(fā)父組件的事件 同時(shí)將修改后的數(shù)據(jù)傳給父組件
				this.$emit("mychange",newsalary,this.index)
			}
		}
	}
</script>

<template>
	<div>
		<h1>app組件--{{msg}}</h1>
		<Box :a1.sync="msg"></Box>
	</div>
</template>
<script>
	import Box from "./Box.vue"
	export default {
		data() {
			return {
				msg: "app的數(shù)據(jù)",
			}
		},
		components: {
			Box
		},
	}
</script>

<template>
	<div>
		<h2>box組件--a1--{{a1}}</h2>
		<button @click="change">修改a1中的數(shù)據(jù)</button>
	</div>
</template>
 
<script>
	export default {
		props:["a1"],
		methods:{
			change(){
				console.log("點(diǎn)擊了按鈕")
				// 由以下兩步操作，變?yōu)榱艘徊剑?
				 //this.a1="box修改了a1的值"
				// this.$emit("myevent","box修改了a1的值")
				this.$emit("update:a1","box修改了a1的值")
			}
		}
	}
</script>

<template>
	<div class="app">
		<h2>app組件--{{msg}}</h2>
		<Box v-model="msg"></Box>
	</div>
</template>
<script>
	import Box from "./Box.vue"
	export default {
		data() {
			return {
				msg:"app組件的數(shù)據(jù)"
			}
		},
		components: {
			Box
		},
		methods:{
		}
	}
</script>

<template>
	<div class="box">
	  <h2>box組件--{{value}}</h2>
	  <button @click="change">change</button>
	</div>
</template>
 
<script>
	export default {
		props:["value"],
		methods:{
			change(){
				this.$emit("input","box修改了數(shù)據(jù)")
			}
		}
	}
</script>

<input type="text" v-model.lazy="message">

<input type="text" v-model.number="age">

 <input type="text" v-model.trim="userName">

<template>
	<div>
		 <h1>app-{{msg}}</h1>
		 <button @click="change1">點(diǎn)擊修改app組件的msg</button>
		 <Box1 :b1="msg" @x="xchange"></Box1>
	</div>
</template>
<script>
	import Box1 from "./Box1.vue"
	export default {
		data() {
			return {
				msg: "app組件的數(shù)據(jù)"
			}
		},
		methods:{
			change1(){
				this.msg="app組件修改了msg的數(shù)據(jù)"
			},
			xchange(arg){
				this.msg=arg
			}
		},
		components:{
			Box1
		}
	}
</script>

<template>
	<div>
		<h1>{{$attrs.b1}}</h1>
		<Box2 v-bind="$attrs" v-on="$listeners"></Box2>
	</div>
</template>
 
<script>
	import Box2 from "./Box2.vue"
	export default {
		components:{
			Box2
		},
		methods:{
			look(){
				console.log(this.$attrs)
			}
		}
	}
</script>

<template>
	<div>
		<h3>box2--{{b1}}</h3>
		<button @click="change">change</button>
	</div>
</template>
 
<script>
	export default {
		props:["b1"],
		methods:{
			change(){
				this.$emit("x","box2修改了數(shù)據(jù)")
			}
		}
	}
</script>

<template>
	<div>
		<h1>app組件--{{msg}}</h1>
		<div>
			<Box1></Box1>
           <!--雖然Box1組件寫(xiě)在div里面 但是.$parent指的還是父組件App 而非div-->
		</div>
	</div>
</template>
<script>
	import Box1 from "./Box1.vue"
	export default {
		data() {
			return {
				msg:"app組件的數(shù)據(jù)"
			}
		},
		methods: {},
		components: {
			Box1
		}
	}
</script>

<template>
	<div>
		<button @click="look">box1</button>
		<Box2></Box2>
		<Box2></Box2>
		<p ref="p1">ref</p>
		<button @click="getref">獲取ref</button>
	</div>
</template>
 
<script>
	import Box2 from "./Box2.vue"
	export default {
		components: {
			Box2
		},
		methods: {
			getref(){
				console.log(this.$refs)
			},
			look() {
				console.log(this,this.$parent,this.$children,this.$root)
				this.$parent.msg="box1修改了app的數(shù)據(jù)"
			}
		}
	}
</script>

<template>
	<div>
		<p>{{$parent.$parent.msg}}</p>
		<button @click="change1">box2-change</button>
	</div>
</template>
 
<script>
	export default {
		methods:{
			change1(){
				this.$parent.$parent.msg="box2修改了數(shù)據(jù)"
			}
		}
	}
</script>

// provide選項(xiàng)提供變量
    provide: {
      message: 'provided by father'
    },

Vue.prototype.$bus = new Vue({
  methods: {
    //綁定事件
    on(eventname, callback) {
      this.$on(eventname, callback)
    },
    //觸發(fā)事件
    emit(eventname, ...arg) {
      this.$emit(eventname, ...arg)
    },
    //解綁事件
    off(eventname, callback) {
      this.$off(eventname, callback)
    },
  }
})

組件1:
 this.$bus.on('changedFormObject',(val) =>{
            //接受并處理傳過(guò)來(lái)的值:val
            this.msg = val;
        });

組件2:
this.$bus.emit('changedFormObject',this.inputValue);//把組件2的data中的給inputValue值傳給組件1