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 -- 案例

Vue 组件子传父理解篇

<!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>

脚本宝典总结

以上是脚本宝典为你收集整理的Vue 组件子传父理解篇全部内容，希望文章能够帮你解决Vue 组件子传父理解篇所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：Vue

上一篇: 【VUE + SPA】接口跨域, 携带co... 下一篇:Vue.js 源码学习笔记

猜你在找的Vue.js相关文章

Vue 3.0 风格指南 2024-10-19
Vue-SuperSlide(SuperSlide component for Vue) 2019-05-07
基于vue2.0的weex实践（前端视角） 2019-05-07
手把手教你写 Vue UI 组件库@vue2.0 2019-05-07
解决vue报错Failed to mount component 2019-05-07
Vue学习笔记之vue-cli项目搭建及解析 2019-05-07
Vue.js—单元测试 2019-05-07
vue2.0脚手架的安装和项目搭建 2019-05-07
Vue经典开源项目汇总demo实例github下载教程 2018-12-04
使用Vue.js构建Wordpress Gutenberg块 2018-11-17

全站导航更多

最新Vue.js教程

热门Vue.js教程