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

2024年4月22日 154次阅读 来源: 秦牧

具体的看代码中的注释

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>
    原文作者：秦牧
    原文地址: https://segmentfault.com/a/1190000008684188
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞