组件传值

组件传值

1.父级向子级传递数据

2.子级向父级传递数据

3.非父子级传递数据

组件传值：

父子级的概念是，A组件如果包含B组件标签，则称A是B的父级。

父级向子级传递的数据

格式是属性传递（所以用双花括号来表达数据，用"："来绑定标签）

首先需要在父级中单向引入子级，然后需要在子级中加入props属性，props是一个字符串数组，里面的值为父级传递过来的属性名

App.vue为父级

Child.vue为子级

<template>
	<!--这里书写html代码-->
<div>
	<h1>明凯，你好</h1>
	<Child :msg="message"></Child>
    <Child :mag="message1"></Child>

</div>

</template>
<script>

import Child from "./components/Child.vue"
export default {

  components:{Child},

    data(){
        return{
            message:"这里是Vue的数据，我要传到Child组件中，也就是父传子",
            message1:"我是Vue的二号数据"
        }
    }

}
</script>
<!--==============上面为App.vue=================下面为Child.vue====================-->

<template>
<div>
    <h1>{{msg}} {{mag}}</h1>

</div>
</template>

<script>
export default {
    props: ["msg","mag"],   //props是一个数组的字符串,值为传过来的属性名msg
    data(){
        return{
            
        }
    }
}
</script>

子级向父级传递数据：

运行事件传递（@来绑定标签）

比如说我现在想写一个功能，一个子级的按钮button，点击它的时候，把子级的数据传递给父级，然后父级的数据变成子级的一个数据。

先在父级中定义一个自定义事件，然后在子级定义一个按钮，然后绑定点击（@click）发生的方法，在子级中定义这个方法，然后在这个方法中调用方法

this.$emit("toParent",this.msg);

其中

//$emit方法可以触发父级（App.vue）的自定义事件，也就是进行了绑定，向自定义事件toParent传递数据
//$emit方法需要两个参数，1、要绑定的父级中的自定义事件，2、所要传递的数据
//可以这样理解，因为我在App中的Child标签中自定义了事件toParent
//然后我又在Child中调用了方法this.$emit，所以App就通过Child联系起来了

然后，分别在子级，父级中定义变量，用来存放数据（一般都充当容器的作用），自己的变量用来存放要给父级传递数据，父级的变量用来接收子级传来的数据。

<template>
  <div>
    <div>我是父组件</div>
    <div>我即将接收第二组件传值是：{{child2Msg}}</div>
    <div>
      <div>
        <Child @toParent="getMag" />
      </div>
    </div>
  </div>
</template>

<script>
import Child from "./components/Child.vue";

export default {
  components: {
    Child

},
  data() {
    return {
      child2Msg: ""
    };
  },
  methods: {
    getMag(msg) {
      this.child2Msg = msg;
    }
  }
};
</script>

<!--==============上面为App.vue=================下面为Child.vue====================-->

<template>
  <div>
    <div>我是第二个子组件</div>
    <div>我要发送给父组件的值：{{msg}}</div>
    <button @click="toParent">向父组件发送信息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "我是第二组件，我要给父组件传值",
    };
  },
  methods: {
    toParent() {
      this.$emit("toParent", this.msg);
    }
  }
};
</script>

点击过后：