收藏
天蓬老师批改状态：合格
老师批语：
父组件 向 子组件 传参: 自定义属性子组件 向 父组件 传参: 自定义方法
<!-- 导入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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
