父子传递案例

父组件源码：

<template>
  <div class="hello">
    <!-- 父组件的值传到子组件来 -->
    <h1>{{ msg }}</h1>
    <button @click="change">点击改变子组件传过来的值</button>
    <!-- 这里用来接收子组件传过来的数组类型的值，加冒号是变量，不加是字符串 -->
    <OnE :str="str" :num="num" :boo="boo" :but="txt" :fn="fn1"></OnE>
    <h3>{{ stp }}</h3>
  </div>
</template>

<script>
// 引入子组件
import OnE from '@/components/OnE';

export default {
  components: {
    OnE
  },
  // 这里用来发送父组件需要传递的数据
  data() {
    return {
      str: '父组件传值给子组件，子组件反馈的是字符串类型',
      num: 123,
      boo: true,
      txt: '玉面飞龙',
      stp: ''
    }
  },
  methods: {
    change() {
      this.txt = '我是改变后的值'
    },
    fn1(str) {
      this.stp = str
      // console.log(this.stp);
    }
  },
  name: 'HelloWorld',
  // 父子传值的步骤：第二步：在子组件中, 使用 props 属性继承父组件的这个属性,  直接使用即可
  props: {
    msg: String
  }
}
</script>

<style scoped lang="scss">

</style>

子组件源码

<template>
    <div class="article">
        <h3>{{ str }}</h3>
        <h3>{{ num }}</h3>
        <h3>{{ boo }}</h3>
        <br>
        <!-- 父组件 HelloWorld传递的值是 : {{ but }} -->
        <h3>{{ but }}</h3>
        <br>
        <button @click="fn('我是从父组件方法中传过来的值')">点击按钮传递方法</button>
    </div>
</template>

<script>
export default {
    // 第一种方式：使用对象传值方法，但是要定义对象类型
    // props: {str: String,num: Number,boo: Boolean,but:String},
    // 第二种方式：使用数组传值方法，直接传值,两种方法只能取其一
    props: ['str', 'num', 'boo', 'but','fn',],
    data() {
        return {
        }
    }
}
</script>

<style lang="scss" scoped>
.article {
    width: 50rem;
    height: 20rem;
    margin: auto;
    border: 1px solid black;
}
</style>

报错：

新建一个文件，编辑器警告

方法一：

解决：

vue.config.js 中添加lintOnSave:false，复制粘贴完整代码

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave:true
})

如果方法一没有用，请用方法二

报错：

解决：