Vue 组件子传父明白篇

2019年8月31日 107次阅读 来源: spring

vue 子传父

1.想要子传父，经由过程子组件掌握父组件要领，进而让父组件的要领本身转变本身的data
2.明白父组件绑定的dom上内容作用域都属于父组件的，因而传值的都是父组件的data或许methods比方
下面的案例，起首v-bind:title = 'title'和@click='parentClick' 中左面都是子组件的接收的变量
值，右面都有多是父组件data或许methods传值:
    <div id='app'>
        <my-com v-bind:title = 'title' @func='parentClick'></my-com>
    <div>
3.简朴总结:等号左面的属于子组件的右面属于父组件

子传父个人明白

1.子传父就是子组件掌握父组件要领，让父组件变相转变本身data
2.需要在子组件methods，某个要领中运用$emit('func','通报的参数') 来掌握
3.这类掌握是变相的，因而会在子组件中零丁有一个事宜在内部特地触发，$emit
要领。

运用$emit — 案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{count}}
    <!--子组件用来通报父组件的要领-->
    <my-Com2 @fun="myChange"></my-Com2>
</div>

<template id="com">
    <!--在组件内部特地定义了一个触发父组件要领的点击事宜-->
    <button @click="changeParent">操纵父组件的子组件要领</button>
</template>

<script>
    let myCom2 = {
        template:'#com',
        data(){
            return {
                title:'子组件',
            }
        },
        methods:{
          // 用来特地触发父组件要领子组件，用来触发$emit
            changeParent(){
                // 依据上面的引见准绳等号左面的属于子组件的右面属于父组件
                // 因而fun是子组件的,通知本身的组件的点击事宜，点击后触发
                // $emit,让他去找参数中和func绑定的父组件的要领
                // 第二个参数可以往父组件传值
                this.$emit('fun','我是传值')
            }
        },
    };

    var vm = new Vue({
        el: '#app',
        data:{
          count:0,
        },
        methods:{
            // 子组件操控父组件转变本身data的要领
            myChange(args){
              console.log(args)
              this.count++;
          }
        },
        components:{
            // 在外部声明变量，运用代码简约
            myCom2,
        }
    });
</script>
</body>
</html>

运用 — sync语法糖案例

1.2.3.0新增的语法糖
2.这类就不涉及到经由过程要领去操控父组件中的data转变，而是应用子传父的思
想，把props中的属性值和父组件中的data构成绑缚，应用$emit转变子组件的
data，变相转变了父组件中的data
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{count}}
    <!--子组件用来通报父组件的要领-->
    <my-Com2 v-bind:parent-Count.sync = 'count'></my-Com2>
</div>

<template id="com">
    <!--在组件内部特地定义了一个触发父组件要领的点击事宜-->
    <button @click="changeParent">操纵父组件的子组件要领</button>
</template>

<script>
    let myCom2 = {
        template:'#com',
        data(){
            return {
                title:'子组件',
            }
        },
        // 父传子
        props:['parentCount'],
        methods:{
          // 用来特地触发父组件要领子组件，用来触发$emit
            changeParent(){
                // 依据上面的引见准绳等号左面的属于子组件的右面属于父组件
                // 将父子组件data 都绑定在一起，转变子组件就是转变了父组件
                this.$emit('update:parentCount',1000)
            }
        },
    };
    var vm = new Vue({
        el: '#app',
        data:{
          count:0,
        },
        components:{
            // 在外部声明变量，运用代码简约
            myCom2,
        }
    });
</script>
</body>
</html>
    原文作者：spring
    原文地址: https://segmentfault.com/a/1190000018104783
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞