博主信息

博文 49

粉丝 0

访问量 47790

专题推荐

组件之间的传参:

父组件 向 子组件 传参: 自定义属性
子组件 向 父组件 传参: 自定义方法

父组件向子组件传参：

样式代码:

 <!-- 导入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>

效果预览:

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

1217 选择器(字体图标、盒模型)示例:

2020-12-17 17:13:53

首页

最新更新

视频教程

学习路径

资源下载

技术文章

社区

微信公众号

组件之间的传参:

父组件向子组件传参：

样式代码:

效果预览:

子组件向父组件传参:

样式代码:

效果预览: