【进阶】兄弟组件之间的数据共享

 

标题	Provide/Inject 机制
推荐	×	√
代码示例	// ParentComponent.vue <template> <div> <BrotherComponent :bucket="fruitBucket"></BrotherComponent> <SisterComponent :bucket="fruitBucket"></SisterComponent> </div> </template> <script> import BrotherComponent from "./BrotherComponent" import SisterComponent from "./SisterComponent" export default { name: "ParentComponent", components: {BrotherComponent, SisterComponent}, data () { return { fruitBucket: ["apple", "pear", "banana", "orange"] } } } </script> // BrotherComponent.vue <template> <div> <button @click="eat">Brother Eat</button> </div> </template> <script> export default { name: "BrotherComponent", props: { bucket: Array }, methods: { eat () { this.bucket.pop() console.log(JSON.stringify(this.bucket)) } } } </script> // SisterComponent.vue <template> <div> <button @click="eat">Sister Eat</button> </div> </template> <script> export default { name: "SisterComponent", props: { bucket: Array }, methods: { eat () { this.bucket.pop() console.log(JSON.stringify(this.bucket)) } } } </script>	// ParentComponent.vue <template> <div> <BrotherComponent></BrotherComponent> <SisterComponent></SisterComponent> </div> </template> <script> import BrotherComponent from "./BrotherComponent" import SisterComponent from "./SisterComponent" export default { name: "ParentComponent", components: {BrotherComponent, SisterComponent}, data () { return { fruitBucket: ["apple", "pear", "banana", "orange"] } }, provide () { return { "eat": this.eatFruit } }, methods: { eatFruit (fruit) { let index = this.fruitBucket.indexOf(fruit) if (index > -1) { this.fruitBucket.splice(index, 1) } console.log(JSON.stringify(this.fruitBucket)) } } } </script> // BrotherComponent.vue <template> <div> <button @click="eatFruit">Brother Eat</button> </div> </template> <script> export default { name: "BrotherComponent", inject: ["eat"], methods: { eatFruit () { this.eat("apple") } } } </script> // SisterComponent.vue <template> <div> <button @click="eatFruit">Sister Eat</button> </div> </template> <script> export default { name: "SisterComponent", inject: ["eat"], methods: { eatFruit () { this.eat("orange") } } } </script>
说明	左边代码示例的写法是件之间通过父组件定义的数据作为中继，相互共享数据。子组件任何时候都不应该直接通过对象引用的方式修改父组件的数据。这种方式是不可控的，你并不知道什么地方修改了父组件的数据。 这里提供了三种方式： 通过依赖注入，调用明确的父组件的方法 通过事件通知父组件
试用边界