zoukankan      html  css  js  c++  java
  • Vue.js组件传值

    子组件向父组件传值

    在子组件页面触发事件$emit

    <template>
       <el-button @click="returnNews">回传给父组件</el-button>
       <el-input v-model="returnMsg"></el-input>
    </template>
    <script>
    export default {
        data() {
            return {
                returnMsg:'',
            }
        },
        methods:{
            returnNews:function(){
                this.$emit("sendMsg",this.returnMsg);
            },
        },
    }
    </script>
    //通过button按钮的点击事件,将控件中输入的值绑定到returnMsg上
    //this.$emit("sendMsg",this.returnMsg);sendMsg是父组件需要的方法名,this.returnMsg是传递的值
    

    在父组件中在组件标签中调用v-on事件监听

    <template>
       <span>子组件回传来的值:{{news}}</span>
       <Childen1 v-on:sendMsg="returnMsg"> </Childen1>
    </template>
    <script>
    import Childen1 from './Childen1';
    export default {
        data() {
            return {
                news:'',
            }
        },
        components: {
            'Childen1': Childen1,
        },
        methods:{
            returnMsg:function(val){
                this.news=val;
            }
        },
    }
    </script>
    

    父组件向子组件传值

    //PartView1 表示子组件
    //new_name是子组件中用来接受父组件传值的参数名
    <div class="item">
        <PartView1 :new_name="name"></PartView1>
    </div>
    
    data() {
        return {
            name:'hello',//给name赋值为hello
        }
    },
    

    在子组件中接受传来的参数

    props: {
      new_name:'',
    },
    
  • 相关阅读:
    .ashx
    svn设置过滤内容
    .NET开发人员应该下载的十个必备工具(1)
    C#中操作XML (节点添加,修改,删除完整版)
    NVelocity模板引擎的注意事项
    什么是好的程序员?
    SQLSERVER2005登录时出错
    240多个jQuery插件(转)
    自己搭建svn
    一元三次方程求解
  • 原文地址:https://www.cnblogs.com/CurryZhang/p/7550516.html
Copyright © 2011-2022 走看看