一.Props传递数据 在父组件中使用子组件,本质通过v-bind绑定属性传入子组件,子组件通过props接收父组件传入的属性 <template> <div> 父组件:{{mny}} <Son1 :mny="mny"></Son1> </div> </template> <script> import Son1 from "./Son1"; export default { components: { Son1 }, data() { return { mny: 100 }; } }; </script> 二.$emit使用 子组件触发父组件方法,通过回调的方式将修改的内容传递给父组件,父组件通过v-on接收子组件传入的方法,并接收子组件传入的参数 <template> <div> 父组件:{{mny}} <Son1 :mny="mny" @input="change"></Son1> </div> </template> <script> import Son1 from "./Son1"; export default { methods: { change(mny) { this.mny = mny; } }, components: { Son1 }, data() { return { mny: 100 }; } }; </script> 子组件触发绑定自己身上的方法 <template> <div> 子组件1: {{mny}} <button @click="$emit('input',200)">更改</button> </div> </template> <script> export default { props: { mny: { type: Number } } }; </script> 同步父子组件的数据,->子组件上使用的语法糖的写法 (.sync和v-model写法),v-model和.sync的区别在于v-model触发的事件只能是input,而.sync可以自定义事件名 .sync <Son1 :mny.sync="mny"></Son1> <!-- 触发的事件名 update:(绑定.sync属性的名字) --> <button @click="$emit('update:mny',200)">更改</button> v-model <Son1 v-model="mny"></Son1> <template> <div> 子组件1: {{value}} // 触发的事件只能是input <button @click="$emit('input',200)">更改</button> </div> </template> <script> export default { props: { value: { // 接收到的属性名只能叫value type: Number } } }; </script> 三.$parent、$children 继续将属性传递 <Grandson1 :value="value"></Grandson1> <template> <div> 孙子:{{value}} <!-- 调用父组件的input事件 --> <button @click="$parent.$emit('input',200)">更改</button> </div> </template> <script> export default { props: { value: { type: Number } } }; </script> 四.$attrs、$listeners $attrs:批量向下传入属性 <Son2 name="小明" age="10"></Son2> <!-- 可以在son2组件中使用$attrs属性,可以将属性继续向下传递 --> <div> 儿子2: {{$attrs.name}} <Grandson2 v-bind="$attrs"></Grandson2> </div> <template> <div>孙子:{{$attrs}}</div> </template> $listeners:批量向下传入方法 <Son2 name="小珠峰" age="10" @click="()=>{this.mny = 500}"></Son2> <!-- 可以在son2组件中使用listeners属性,可以将方法继续向下传递 --> <Grandson2 v-bind="$attrs" v-on="$listeners"></Grandson2> <button @click="$listeners.click()">更改</button> 五.Provide & Inject 依赖注入原理,provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。 Provide:在父级中注入依赖数据 provide() { return { parentMsg: "父亲" }; }, Inject:在任意子组件中可以注入父级数据 inject: ["parentMsg"] // 会将数据挂载在当前实例上 六.Ref使用 一个对象,持有注册过 ref 特性的所有 DOM 元素和组件实例。可以在父组件中获取子组件的属性和方法。 <Grandson2 v-bind="$attrs" v-on="$listeners" ref="grand2"></Grandson2> mounted() { // 获取组件定义的属性 console.log(this.$refs.grand2.name); } 七.EventBus 用于跨组件通知(不复杂的项目可以使用这种方式) Vue.prototype.$bus = new Vue(); 在vue原型对象上添加一个公共发放,暴露vue示例,供组件接收方法 mounted() { this.$bus.$emit("my", "我是Grandson1"); }, 兄弟间组件接收方法 mounted() { this.$bus.$on("my", data => { console.log(data); }); }, 八.Vuex通信 全局统一状态管理,用于大型项目组件间通信,管理数据状态。 总结,vue的所有通信方法总结,没有写的特别详细,详细的用法可见vue文档,嗯,就酱啦~
转载自://www.cnblogs.com/jiajialove/p/11507386.html