组件之间的传参:
父组件 向 子组件 传参: 自定义属性子组件 向 父组件 传参: 自定义方法
父组件向子组件传参：
样式代码:
<!-- 导入vue框架 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><body> <div id="app"> <!-- 父组件是通过自定义属性的方式将参数传到子组件中的 --> <btn-inc :my-name="username" :my-count="count"></btn-> </div> <script> const vm = new Vue({ el: document.querySelector("#app"), data() { return { username:"为你点赞", count: 0, }; }, // 局部组件子组件 components: { btnInc: { // props接受父组件向子组件的自定义传参 props: ["myName", "myCount"], // 报错原因,组件之间的数据传递是单向的,不允许在子组件中更新父组件中的数据 template: ` <div> <button @click="num++">点赞: + {{num}}</button> <span>{{myName}}</span> </div> `, data() { return { num: this.myCount, }; }, methods: { inc(n) { this.num += n; }, }, }, }, }); </script></body>
效果预览:
子组件向父组件传参:
样式代码:
<!-- 导入vue框架 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><body> <div id="app"> <!-- 子组件中更新父组件的数据是通过事件完成 --> <btn-inc :my-name="username" :my-count="count" @click-count="handle"></btn-inc> </div> <script> const vm = new Vue({ // 子组件向父组件传参是通过声明同名事件来实现 el: document.querySelector("#app"), data() { return { username: "菜市场买菜", count: 0, }; }, // 局部组件子组件 components: { btnInc: { //props接受父组件向子组件的自定义传参 props: ["myName", "myCount"], // 报错原因,组件之间的数据传递是单向的,不允许在子组件中更新父组件中的数据 template: ` <div> <button @click="$emit('click-count',10)">点赞: + {{myCount}}</button> <span>{{myName}}</span> </div> `, }, }, // 父组件更新数据的方法 methods: { handle(value) { console.log(vm.count); this.count += value; this.username = "商业城"; }, }, }); </script> </body>
效果预览:
