Vue父子组件之间的调用和数据传递

版权声明：本文为博主原创文章，转载请注明出处。 https://blog.csdn.net/m0_37520980/article/details/83280428

父子组件的定义

vue的官网上写了一些关于父子组件的定义调用及值的传递。这里我就不做过多的赘述了。我只说一下我在开发中遇到的一些小问题。

两个文件的父子组件

vue官网和菜鸟教程上说的并不是很清楚，这里我就清楚的说一下。废话不多说，直接上代码。

父组件：

<template>
  <div>
    试试:
    <my-dialog v-bind="dialog_data"></my-dialog>
  </div>
</template>

<script>
// 父组件引用子组件，注意避开关键字
import myDialog from '../publicCompoments/winDialog'
export default {
  components: { myDialog },
  data() {
    return {
      dialog_data: {
        isNoWin: true, // 是否没中奖 默认未中奖,值为:true
        iconPath: require('../../assets/img/undraw.png'),   // 注意这里要用require传图片
        title: '页面测试标题!',  // 页面标题
        text: '页面测试文本！',    // 文本
      }
    }
  }
}
</script>

<style scoped>

</style>

子组件：这里要注意一下子组件的文件名要避开关键字，父组件中引用的时候也要注意避开关键字，这是开发时候的常识了，但是这个出错了不太好查。
在这里我还解释父子组件中如何传值，如何传图片的路径的问题，如果还是不怎么看的懂，可以看一下菜鸟教程或者官方API

<template>
  <div>
    <div v-if="isNoWin">
      <div>
        <!-- 父子组件之间传递图片,子组件的img标签中的src要使用 :scr="imgPath";
        父组件中的值要用require()这个函数传值 -->
        <img :src="iconPath">
      </div>
      <div>
        <span>{{ title }}</span>
      </div>
      <div>
        {{ text }}
      </div>
    </div>
    <div v-if="isNoWin != true">

    </div>
    <div v-if="isNoWin != true">
      请填写信息:{{ text }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'winDialog',	// 这个name是必须的，方便引用
  props: {
    isNoWin: {  // 一个控制标签，可设置默认值
      type: Boolean,
      default: false	//设置默认值
    },
    iconPath: String,   // 页面现实的额图标
    title: String,  // 页面标题
    text: String,    // 文本
  }
}
</script>
<style scoped>
</style>

暂时记得的就只有这么多，以后再更新吧