【Vue】父子组件传值

最新推荐文章于 2022-04-20 17:53:48 发布

enchantedovo

最新推荐文章于 2022-04-20 17:53:48 发布

阅读量112

点赞数

分类专栏： # vue

原文链接：https://blog.csdn.net/qq_43738157/article/details/85320596

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、父组件---->子组件传递数据

父组件：
Vue中的父组件要想向子组件传递值的化需要通过属性的方式传递

<body>
  <div id="root">
    <counter :count="1"></counter>
    <counter :count="2"></counter>
  </div>
  <script>
  var counter={
    props:["count"],
    template:"<div>{{count}}</div>"
  } 
  var vm=new Vue({
    el:"#root",
    components:{
      counter:counter
    }
  })
  </script>
</body>

子组件：
子组件操作传递过来的数据
可以在子组件定义一个data为number来接这个count,我们直接去操作这个number就可以不影响父组件了

var counter={
    props:["count"],
    data:function(){
      return {
        number : this.count
      }
    },
    template:"<div @click='handleClick'>{{number}}</div>",
    methods:{
      handleClick:function(){
        this.number++
      }
    }
  }

二、子组件---->父组件传递数据

父组件通过监听这个事件,就可以获取数据

子组件：

<template>
  <div class="child">
    <button @click="toParent">点击</button>
  </div>
</template>

<script>
export default {
  name: 'child',
  data () {
    return {
      // 要传给父组件的值
      msg: '送给父组件的值'
    }
  },
  methods: {
    // 第一步：定义一个方法，作为传值的触发条件
    toParent: function () {
      // 第二步：通过 this.$emit 传值
      this.$emit('sendData', this.msg)
      // 第一个参数为父组件监听子组件的事件，第二个参数为要传的值
      // 可以传多个值
    }
  }
}
</script>

父组件：

<template>
  <div class="parent">
    <h1>{{ msg }}</h1>
    <!-- 使用子组件 -->
    <child @sendData="getData"></child>
    <!-- 第一步： -->
    <!-- 给子组件绑定一个事件，用来监听子组件 -->
    <!-- 事件被触发时，就通过绑定的方法接收子组件的传值 -->
  </div>
</template>

<script>
// 导入子组件
import child from '@/components/child'

export default {
  name: 'parent',
  data () {
    return {
      // 定义一个变量接收子组件的传值
      msg: ''
    }
  },
  components: {
    // 注册子组件
    child
  },
  methods: {
    // 第二步：
    // 定义一个方法，接收子组件的传值
    getData: function (content) {
      this.msg = content
    }
  }
}
</script>