您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生

14父子组件传值 -完整

发布时间：2023-04-10 11:39:52编辑：雪饮阅读（）

这次主要是了解下父子组件传值，支持多个值传递，支持传递一个方法，支持传递整个组件的数据，接收方也可以限制所要接收的数据类型。
实例app.vue如
<template>
  <div id="app">
    <!---
      父组件将data里面的flag001的值传给flag001标签属性
 
      父组件传值时候的写法可以是
      :flag001="flag001"
      也可以是
      flag001="flag001"
      但这样虽然没有问题，但是控制台会有类似：
      The data property "flag001" is already declared as a prop. Use prop default value instead.
      的警告输出
 
      组件传值，可以一次性传递多个值
 
      同样父组件也可以将自己的方法传递给子组件
 
     给子组件传递方法时候，需要参数的方法写法是相同的，只是子组件那边调用时候需要传参而已
 
     父组件甚至可以将自己整个组件数据传递给子组件
     这种情况下控制台可能会报错如
     Property or method "__v_isRef" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
     我这里采取的方式是重新npm run dev
 
     那么数据验证情况下，若props中functb类型限定为Function，这里假如直接传一个数字类型，例如12，就可能会在控制台抛出错误如
     Invalid prop: type check failed for prop "functb". Expected Function, got Number with value 12.
 
     
     同样的如果:flag001="functa"，是传了一个Function类型，则由于props那边是String类型，则可能会抛出错误如
      Invalid prop: type check failed for prop "flag001". Expected String, got Function
      于控制台，但是页面上还是能呈现，只是呈现的比较怪异，有些错误就是非致命的就不影响，如果那边是要执行一个方法，结果直接传一个字符串之类的。。。
      可能页面都不出来了吧，不过目前看起来没有那么严格，我没有细测
     --->
    <v-header :flag001="flag001" :flag002="flag002" :functa="functa" :functb="functb" :superdata="this"></v-header>
  </div>
</template>
 
<script>
    import header from './components/header.vue'
    export default {    
      data () {
        return {
          flag001:"我是父组件的flag001",
          flag002:"我是父组件的flag002"
        }
      },
      methods:{
          functa(){
            alert("我是父组件的方法a");
          },
          functb(params){
            alert("我是父组件的方法b:"+params);
          }
      },
      components:{
        "v-header":header
      }
    }
</script>
实例header.vue如
<template>
    <div>
        <p>flag001:{{flag001}}</p>
        <p>flag002:{{flag002}}</p>
        <button @click="functa">调用父组件方法functa</button>
        <button @click="functb('参数来自子组件')">调用父组件方法functb(给方法传参)</button>
        <button @click="functc()">调用父组件整个数据</button>
        <button @click="functd()">查看数据类型</button>
    </div>
</template>
<script>
 
export default{
    data(){
        return {
            flag001:"我是子组件的flag001"
        }
    },
    methods:{
        functc(){
            console.log("父组件自己:"+this.superdata);
            console.log("父组件data里面的flag001"+this.superdata.flag001);
          },
          functd(){
            console.log("flag002:"+typeof(this.flag002));
            console.log("functb:"+typeof(this.functb));
            console.log("superdata:"+typeof(this.superdata));
          }
    },
    /*
    子组件使用props定义flag001元素对接该组件被父组件所传值时的flag001属性名
    如果子组件的data里面也有flag001，则优先级是props里面的flag001
 
    props可以定义多个属性同时接收父组件传递的多个值
    同样，子组件也可以接收父组件的方法
    */
    //props:['flag001','flag002','functa','functb','superdata']
    /*
    子组件也可以验证数据类型,则porps不是以数组形式，而是以键值对形式定义
    */
    props:{
        'flag001':String,
        'flag002':String,
        'functa':Function,
        'functb':Function,
        'superdata':Object
        }
}
</script>