Vue 第八章子组件向父组件传值

Posted 2021-03-04 ywjfx

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 第八章子组件向父组件传值相关的知识，希望对你有一定的参考价值。

1、子组件向父组件传值步骤

1、父组件定义一个方法
methods:{
          show(data){
              this.fumsg = data;
               console.log("父组件数据"+data)
          }
        }

2、子组件通过事件绑定调用父组件方法
<!--        父组件向子组件传递方法，使用事件绑定机制 v-on -->
        <com2 v-on:func="show"></com2>
        <h1>h还没有值：{{fumsg}}</h1>

---------------上面为父组件内容，下面为子组件内容----------------------

3、定义子组件触发事件，使得子组件调用父组件方法，并传值
 <input type="button" value="子组件按钮" @click="myclick">

4、子组件调用父组件方法，并传值
  myclick(){
                //当点击子组件按钮的时候，通过$emit触发
                this.$emit(‘func‘,‘123123‘)
            }

2、案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--cdn镜像快速导入Vue包-->
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
</head>
<body>
<div id="app">
    <div>
<!--        父组件向子组件传递方法，使用事件绑定机制 v-on -->
        <com2 v-on:func="show"></com2>
        <h1>h还没有值：{{fumsg}}</h1>
    </div>
    <template id="temp">
        <div>
            <h1>这是子组件</h1>
            <input type="button" value="子组件按钮" @click="myclick">
        </div>
    </template>

</div>
<script>
    var com2 = {
        template:‘#temp‘,
        methods: {
            myclick(){
                //当点击子组件按钮的时候，通过$emit触发
                this.$emit(‘func‘,‘123123‘)
            }
        }
    }

    //2.创建一个vue实例
    //父组件
    var vm = new Vue({
        el: ‘#app‘,
        data: {
            msg:‘这是父组件的数据‘,
            fumsg:‘‘,
        },
        methods:{
          show(data){
              this.fumsg = data;
               console.log("父组件数据"+data)
          }
        },
        components:{
            com2
        }
    })
</script>
</body>
</html>

以上是关于Vue 第八章子组件向父组件传值的主要内容，如果未能解决你的问题，请参考以下文章

Vue 第八章 子组件向父组件传值

Vue 第八章子组件向父组件传值