美文网首页
子组件获取父组件数据

子组件获取父组件数据

作者: 小雞雞炖蘑菇 | 来源:发表于2017-03-15 19:16 被阅读0次

父组件内v-bind:属性名="父组件内变量名",简写为 :属性名="父组件内变量名",当发送多个数据时可以在父组件内把数据打包成一个json对象,以对象的形式发送至子级,此种方式发送数据在子级接收时要注意数据的类型为Object。或者数据不多,可以多定义几个属性也行,如 :m="name" :a="age",此中方式发送数据时属性名字对应即可;

<template>
  <div id="app">
    <h1>这里是父组件</h1>
    <hello :name="name"></hello>
  </div>
</template>

<script>
import hello from './components/Hello'
export default {
  name: 'app',
  data () {
    return {
      name: '张三'
    }
  },
  components: {
    hello
  }
}
</script>

2.子组件内接收props接收,props: ['属性名'] 或者 props: {属性名:{type:数据类型,default:默认值。。。。}}

<template>
  <div id="hello">
    {{name}}
  </div>
</template>

<script>
export default {
  name: 'hello',
  props: {
    name: {
      type: String
    }
  }
}
</script>

相关文章

网友评论

      本文标题:子组件获取父组件数据

      本文链接:https://www.haomeiwen.com/subject/ndlrnttx.html