zoukankan      html  css  js  c++  java
  • vue父子组件传值

    1、父组件向子组件传值

    例如app.vue是父组件,v-header.vue是子组件,实现app向v-header传值父组件需要自定义自己的title值,

    子组件v-header内容

    <template>
        <div class="v-title">
            <div>
                <span>{{title}}</span> 
            </div>
        </div>
    </template>        
    
    <script>
    export default{
    props:['title'],  //声明title
    data (){
        return {}
      }
    }
    </script>

    父组件app.vue内容

    <template>
        <div class="app">
            <vHeader :title="Name"></vHeader> //在这里传值给子组件
        </div>
    </template>        
    
    <script>
    import vHeader from '@components/header/v-header' //注册header组件
    export default{
    components:{vHeader}, //注册header组件 data (){ return {
    Name:'我是首页' //最终显示在app.vue的title就是这个
    } } }
    </script>

    2、子组件向父组件传值

    $.emit用法

    this.$emit(event,...args);
    /* event: 要触发的事件
        args: 将要传给父组件的参数*/ 

    父组件app.vue内容

    <template>
    <div class="app">
      <city @changeCity="changeCityName"></city>
    </div>
    </template>
    <script>
    import city from '@/components/city' //把子组件city导入
    export default{ data (){ return {
    } },
    methods:{
    changeCityName(val){
    this.name=val
    }
    }
    } </script>

    子组件city.vue内容

    <template>
    <div class="city">
      <city>{{changecity}}</city>
    </div>
    </template>
    <script>
    export default{
    data (){
        return {
           
        }
      },
    compute:{ //选中子组件里的值,赋给父组件
    this.name=this.cityname;
    return this.name
    }, methods:{ changeCity(val){
    this.name=val; this.$emit('changeCity',this.name); //把子组件的值传给父组件 } } } </script>
    
    
    
  • 相关阅读:
    Asp.net 文件下载,中文文件名出现乱码
    存储过程中执行动态Sql语句
    SQLServer : EXEC和sp_executesql的区别
    C# 从服务器下载文件代码
    在windows 7 上为 sqlserver 2008 启用远程访问
    数字求和
    大道至简第一章读后感
    作业
    SharePoint2013 App 开发中 自定义网站栏,内容类型,列表。
    SharePoint2013 App开发模式
  • 原文地址:https://www.cnblogs.com/leiting/p/8145448.html
Copyright © 2011-2022 走看看