学习Vue---Vue组件传值

学习Vue—Vue组件传值

父组件传给子组件

一个$parent为一级
下面代码为父组件传过来的值

fater(){
      this.$parent.count--
    }

下面代码为爷组件传过来的值

fater(){
      this.$parent.$parent.count--
    }

$root为根组件

fater(){
      this.$root.count--
    }

同时父组件需要以下代码

<button @click="son">+</button>

son(){
        this.$refs.aaa.fater()
    }

$refs.aaa相当于声明传给哪个子组件并传给这个子组件里的方法fater()方法

<list ref="aaa" @mycountevent="demo"></list>

子组件传给父组件
先在子组件里用@click调用一个方法，并传入值

<button @click="changenum(2)">+</button>

方法中调用this.$emit(‘mycountevent’,num)
mycountevent为自己写的方法，num为要传过去的值

changenum(num){
      this.$emit('mycountevent',num)
    }

之后父组件里的子组件上面使用这个自定义的方法，demo为一个在父组件里定义的方法

<list ref="aaa" @mycountevent="demo"></list>

然后在父组件里定义这个demo，data即为子组件传过来的值

demo(data){
      this.count +=data;
      console.log(data)
    }