vue组建之间值得传递(父到子)

转载于 2017-03-14 05:47:39 发布 · 74 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000008684188

文章标签：

#javascript #ViewUI

本文介绍了一个简单的Vue.js应用实例，展示了如何通过属性传递实现父组件向子组件的数据传递。通过具体代码示例，读者可以了解到如何在Vue项目中正确地使用属性绑定来实现组件间的通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

具体的看代码中的注释

App.vue(父组件)

<style>

</style>

<template>
  <div id="app">
    <h1>Hello Vue</h1>
    
    <!--在组件中绑定name属性,name值在父组件中赋值-->
    <modal-tip
      :name="name"
    ></modal-tip>

  </div>
</template>

<script>

//将子组件引入父组件
import modalTip from './modalTip.vue'

export default {
  name: 'app',
  //在components属性中注册局部组件(区别于全局组件),供父组件调用
  components:{
    modalTip
  },
  data () {
    return {
      //对name进行赋值
      name:'zqz'
    }
  }
}
</script>

modalTip.vue(子组件)

<style>
    

</style>
<template>

    <p>{{ name }}</p>

</template>
<script>

export default {
    props:{
        //对来自于父组件的值进行校验(体现出严谨性)
        name:{
            //校验类型
            type:String,
            //设置默认值
            default:'zqz',
            //校验是否必须
            required:true,
        }
    },
    name:'modalTip',
    
}
    
</script>