vue component – 组件传值子传父_vue component传值-CSDN博客

本文链接：https://blog.csdn.net/qq_42801914/article/details/140691089

vue component – 组件传值子传父

1.想要子传父，通过子组件控制父组件方法，进而让父组件的方法自己改变自己的data
2.明确父组件绑定的dom上内容作用域都属于父组件的，因此传值的都是父组件
的data或者methods例如下面的案例，首先v-bind:title = 'title'和
:click='parentClick' 中左面都是子组件的接受的变量值，右面都有可能是父组件
data或者methods传值,父传子不仅仅可以传data也可以传methods:
    <div id='app'>
        <!--parentClick是父组件的method-->
        <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>

props – 利用函数回调的方式，不推荐使用

1.这种方法不推荐，利用的是在父组件绑定一个和子组件相关的方法利用props，在子组件去调用方法的时候，变相的调用父组件和props相关绑定的方法，形成回调函数，来实现子传父

子组件的写法

	<template>
	  <div>
	   <h1 @click="changeMessage">{{message}}</h1>
	  </div>
	</template>
	
	<script>
	export default {
	  name: 'test',
	  props:{
	    message:{
	        type:String,
	    },
	    onChange: {
	      type: Function,
	      default: () => {}
	    }
	  }, 
	  methods:{
	    changeMessage(){
	      // 触发和父组件形成绑定关系的props
	      this.onChange('测试')
	    }
	  }
	}
</script>

<style scoped lang="less">

</style>

父组件的写法

<template>
    <Test :onChange="changeMessage"/>
</template>

<script>
    import Test from '@/components/test.vue'
    export default {
        name: "Index",
        components:{
            Test
        },
        data(){
            return{
                pMessage:'测试111'
            }
        },
        methods:{
            // 将父组件的方法和子组件的props方法绑定形成回调
            changeMessage(val){
                this.pMessage = val
            }
        }
    }
</script>

<style scoped>

</style>