组件间通信-props

标签：name default HelloWorld 间通信 props 组件 data

Props

功能

　　让组件接收外部传过来的数据

传递数据

<Demo name="xxx"/>

接收数据

    1. 第一种方式（只接收）：

props:['name']

    2. 第二种方式（限制类型）：

props:{ name: String }

    3. 第三种方式（限制类型、限制必要性、指定默认值）：

props:{
    name:{
        type:String, //类型
        required:true, //必要性
        default:'老王' //默认值
    }
}

备注

　　(1). props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

　　(2).不要使用v-model去绑定props中的数据

　　(3).props传过来的若是引用类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。

props适用于

    ​ (1).父组件 ==> 子组件 通信 　　　　即常规的使用方式
    ​ (2).子组件 ==> 父组件 通信（要求父先给子一个函数）

　　　　如下代码：

　　　　子组件通过调用传递的test1方法改变父组件中的数据

// 父组件
<template>
  <div id="app">
    <h1>{{ n }}</h1>
    <HelloWorld :m="test1"/>
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data(){
    return {
      n: 10
    }
  },
  methods:{
    test1(n){
      this.n = n
      return this.n
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <h3>{{ m(100) }}</h3>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props:{
    m: {
      type: Function,
      required: true,
      default: (a) => a
    }
  }
}
</script>

 

标签：name,default,HelloWorld,间通信,props,组件,data
From： https://www.cnblogs.com/xt112233/p/17000092.html