Vue-基础-子组件向父组件传递值_vue实现子组件给父组件传值csdn-CSDN博客

本文链接：https://blog.csdn.net/weixin_72492001/article/details/126292740

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <!--引入vue的js文件-->
  <script src="js/vue-2.6.10.js"></script>
  <!--引入axios的js文件-->
  <script src="js/axios.min.js"></script>
</head>
<body>
      <div id="root">
          <h2>num = {{num}} </h2>
          <!--子组件的++ &#45;&#45; 方法绑定父组件的++ &#45;&#45; 方法-->
        <counter :snum="num" @plus="numPlus" @reduce="numReduce"></counter>
      </div>
</body>
</html>
<script>
  // 定义组件
  // 子组件接收到父组件属性后，默认是不允许修改的
  // 那么加和减的操作一定是放在父组件
  let counter = Vue.extend({
        template:`<div>
           <button @click="innum">+</button>
           <button @click="denum">--</button>
        </div>`,
      // 定义子组件的++ -- 方法
      methods:{
          // 这里是不能直接绑定父组件的numPlus方法的，因为这个innum是在子组件当中，
          // 无法读取到numPlus,所以要中间值去转绑定
          innum(){
              // 调用父组件++ --方法
              this.$emit("plus");
          },
          denum(){
              // 调用父组件++ --方法
              this.$emit("reduce");
          },

      },

        props:["snum"]
  });
  // 2 注册组件
  Vue.component("counter",counter);
  // 3. 使用组件
  new Vue({
    el:"#root",
    data:{
        num:50
    },
      // 定义父组件的++ -- 方法
      methods:{
        numPlus(){
            this.num++;
        },
        numReduce(){
            this.num--;
        }
      }
  });
</script>