6、Vue 中组件怎么传值

1、父传子

1. 先在父组件中给子组件的自定义属性绑定一个 父组件的变量

父组件

<template>
<!--  给子组件的自定义属性绑定一个 父组件的变量 -->
  <Son :info="transmit" />

</template>

<script>
import Son from './components/Son1.vue'

export default {
  name: 'App',
  data(){
    return {
      transmit:"父组件传给子组件的数据"
    }
  },
  components: {
    Son
  }
}

在子组件的props属性取出父组件给的值

<template>
  <div class="top">
    <h3>这是子组件</h3>
    <p>{{info}}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
//props属性取出父组件给的值
  props:['info'],
  data(){
    return{}
  }
}

2、子传父

在父组件中给子组件的 自定义属性 绑定一个父组件的函数

父组件

<template>
<p>{{msg}}</p>
<!--   绑定父组件的函数" -->
        <!--  @自定义事件="父组件的处理函数" -->
  <HelloWorld @Submit='getSon' />
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  data(){
    return {
      msg:'',
    }
  },
  methods:{
    // 父组件的处理函数
    getSon(value){
      console.log(value);
      this.msg=value

    }
  },
  components: {
    HelloWorld
  }
}

在子组件中创建一个按钮，给按钮绑定一个点击事件来触发一个自定义事件

在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数

子组件

<template>
  <div class="hello">
    <p>这是子组件</p>
    <button @click="toFather">提交</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  methods:{
    toFather(){
      console.log("子组件传值成功");
      this.$emit("Submit","子组件传递的数据")
    }
  }
}

最终结果：点击提交按钮之后子组件的数据传递到父组件