阅读数:132 评论数:0

一、父组件向子组件传值

父组件通过props的方式向子组件传递数据，props只可以从上一级组件传递到下一级组件，而且props只读。

1、基本示例

（1）创建子组件，在src/components/文件夹下创建一个Child.vue

（2）Child.vue中创建props，然后创建一个名为message的属性。

<template>
  <div>
      <h2>child子组件部分</h2>
      <p>{{message}}</p>
  </div>
</template>
<script>
export default {
  props: ["message"]
}
</script>
<style>
</style>

（3）在Parent.vue中注册Child组件，并在template中加入child标签，标签中添加message属性并赋值。

<template>
   <div>
      <child message="hello"></child>
   </div>
</template>
<script>
import child from './component/Child'
export default {
  name: 'app',
  components: {
    child,
  }
}
</script>
<style>
</style>

2、类型限定

props不仅能传变量，还能传递方法，能对变量的数据类型加以控制，另外还能传入一个对象，在对象中可以设置必填、默认值、自定义校验。

export default {
    name: "Child",
    props:{
         //你可以让count不仅可以传数值型，还能传入字符串
        count:[Number,String],   
        //设置必填
        count:{
            type:Number,
            require:true 
        }, 
        //设置默认值
        count:{
            type:Number,
            default:100  
        },
        //设置带有默认值的对象，对象或数组默认值必须从一个工厂函数获取
        user:{           
            type:Object,
            default: ()=>{return {name:'jj'}}
        }，
        // 自定义校验，这个值必须匹配下列字符串中的一个
        user:{
            type:String,
            validate: (value)=>{return ['bob','jack','mary'].findIndex(value)!==-1}
        }
    }
}

二、子组件向父组件传值

父组件@xxx='yyy'（或者v-on:xxx='yyy'）与子组件this.$emit('xxx',ary)只要保证xxx一致就可以。

1、基本示例

（1）在子组件中使用$emit来触发一个自定义事件，并传递一个参数

<template>
  <div>
      <h2>Child子组件部分</h2>
      <p>{{message}}</p>
      <button v-on:click=sendMsgToParent>向父组件传值</button>
  </div>
</template>
<script>
export default {
  props: ["message"],
  methods: {
    sendMsgToParent: function(){
         this.$emit("listenToChildEvent","this message is from child");
    }
  }
}
</script>

（2）在父组件中监听该自定义事件并添加一个响应该事件的处理方法

<template>
  <div>
    <child v-bind:message="parentMsg" v-n:listenToChildEvent="showMsgFromChild">
      
    </child>
  </div>
</template>
<script>
import child from './components/Child';
export default {
  name: 'parent',
  data() {
     return {
      parentMsg: 'hello,child',
    }
  },
  methods: {
     showMsgFromChild: function(data) {
      console.log(data);
    }
  }
}
</script>