vue父给子传值

最新推荐文章于 2024-07-23 14:29:05 发布

hooking_parse

最新推荐文章于 2024-07-23 14:29:05 发布

阅读量235

点赞数

本文链接：https://blog.csdn.net/qq_35490522/article/details/107884299

版权

无跨路由传值通讯：父给子传值
父组件：

<template>
  <div>
    <div>父组件</div>
    <div>父组件要传递的参数：{{msg}}</div>
    <!-- 1.传递：data1为动态参数msg的参数名，名字自定义，与子组件接收参数名同名
    data2为静态参数的参数名，名字自定义，与子组件接收参数名同名 -->
    <child :data1="msg" data2="777">正在传入data值</child>
      <div><router-link to="child" >跳转</router-link></div>
  </div>
</template>
<script>
import child from './child'
export default {
  data () {
    return {
      msg: '666'
    }
  },
  components: {
    child
  }
}
</script>

子组件：

<template>
  <div>
    <div>这里是child组件</div>
    <!-- 3.使用：这里就是接收的父组件参数 -->
    <div>接受的父组件动态参数：{{ data1 }}</div>
    <div>接受的父组件静态参数：{{ data2 }}</div>
    <div>接受的父组件参数：{{ data }}</div>

  </div>
</template>
<script>
export default {
  // 2.接收：props接收父组件参数，data1与data2为传递参数的参数名，与父组件内同名
  ***props: ['data1', 'data2'],***
  **data () {
    return {
      data: '默认值'
    }
  },**
  // 3.使用：直接用this调用
  **mounted () {
    this.data = this.data1
  }
}**
</script>