关于前端:vue-props-传值

56次阅读

共计 544 个字符，预计需要花费 2 分钟才能阅读完成。

 父子组件能够利用 props 间接传值，在子组件中定义 props，并可规定传值类型，当父组件应用子组件时传入相应参数，即可把父组件的数值传递到子组件中。

父组件 Father.vue

<template>
  <div id="app"> 
    {{msg}}
    <last-children :msgchange='msgdata'></last-children>
  </div>
</template>

<script>
import LastChildren from './components/lastChildren.vue'

   export default {  
    components:{LastChildren},   
      data () { 
        return {       
         msg: '你好 vue',
         msgdata: '我是父组件传值'
        }
      }     
    }
</script>

子组件 lastChildren.vue

<template>
    <div>    
       {{msg}}
       <span>{{msgchange}}</span> 
    </div>
</template>

<script>
    export default{
        name: 'last-children',
        data(){
            return {msg: '我是一个 home 组件'}
        },
        props:{
            msgchange: {type: String}
        }
    }
</script>

正文完