vue-组件传值

禁用Attribute继承和多根节点

父(组件)传子(组件)时

父组件中有class、id等元素的时候
在需要传值给子组件时
子组件中:
<h2 :="$attrs">{{title}}</h2><h2 :class="$attrs.class">{{title}}</h2>
父组件中:
<show-message class="beichen" id="beichenzero" title="哈哈哈" content="嘿嘿嘿"></show-message

子组件传递信息给父组件

逻辑关系：
在子组件中定义需要传递的name -> 通过$emit来传递。

// 一般时用数组传递信息
emits: ["add", "sub", "add_N"],
methods: {
  increment() {
    console.log("+1");
    // 触发事件
    this.$emit("add");
  },
  decrement() {
    console.log("-1");
    // 触发时间
    this.$emit("sub");
  }
},

这里我时通过按钮的点击时间触发函数的方式进行值传递。
同时在父组件中通过v-on或是@的语法糖来监听

template代码：
<h2>当前计数:{{counter}}</h2>
<counter-operation @add="add()" @sub="sub()"></counter-operation>

script代码：
data() {
  return {
    counter: 0,
  }
},
methods: {
  add() {
    this.counter++;
  },
  sub() {
    this.counter--;
  }
}

问题1：子组件使用this.$emit(‘父组件事件名’,参数)，父组件接收参数报undifined

• 解决办法：
  去掉父组件监听后使用方法的方法名的括号，子组件未识别。
  错误案例(以下代码为父组件中的)：
  <counter-operation @addN="addNum()"> </counter-operation>
  去掉addNum后面的括号就好了