zoukankan      html  css  js  c++  java
  • vue父页面给子页面传递数据

    父页面:

    <template>
    <div>{{msg}}
    <Son title='向子文件传递数据' :data='data' :lifemsg ='lifemsg' :num='num'/>
    <button @click="chageMsg">修改数据</button>
    <input type="text" v-model="lifemsg" />
    </div>

    </template>

    <script>
    import Son from './son'
    export default {
    name: 'mc',
    data() {
    return {
    msg: '自定义',
    data:'我是父数据',
    lifemsg:'',
    num:10

    }
    },
    components:{
    Son
    },
    methods:{
    chageMsg(event){
    this.data = '修改后的自定义'
    }
    }
    }
    </script>
    <!--scoped样式只在当前组件生效-->
    <style scoped>

    </style>

    子页面:

    <template>
    <div><p>son {{title}},{{data}} </p>
    <p>父页面传过来的:{{lifemsg}}</p>
    <p>{{num}}</p>
    </div>

    </template>

    <script>
    export default {
    name: 'son',
    data() {
    return {
    msg: '自定义'

    }
    },
    props:['title','data','lifemsg','num']
    // props:{ //对父类的数据类型进行验证
    // title:[String,Number]
    // lifemsg:String,
    // num:Number,
    // data:{
    // type:String,
    // required:true
    // }
    // }
    }
    </script>

    <style>

    </style>

  • 相关阅读:
    Vuejs --01 起步
    ajax利用FormData异步文件提交
    格式化JSON数据
    获取url中的参数
    xampp配置多端口访问
    自动识别移动端还是PC端
    一些常见的shell命令和git命令
    网站性能优化之减少HTTP请求
    ajax学习笔记
    canvas随笔
  • 原文地址:https://www.cnblogs.com/qiyc/p/9108623.html
Copyright © 2011-2022 走看看