vue学习笔记

组件通信

prop是用于父组件向子组件传递数据。

$ref是父组件调用子组件的属性和方法。

$emit是子组件告知父组件调用父组件的方法并可以从子组件传递参数到父组件。

父组件（使用公共组件的地方）

<template>
    <div>
        <h1>这是父组件</h1>
        <MyComponent ref="myComponent" :value="value" @on-input="onInput"></MyComponent>
    </div>
</template>

<script>
   import MyComponent from '@/components/my-component /my-component.vue';
   export default{
      components:{MyComponent },
      methods: {
        onInput(value) {
           console.log('-------', value);
           //调用子级方法
           this.$refs.myComponent.open();
        },

      },
   }
</script>

子组件（封装的公共组件）

<template>
    <input type="text" :value="value" :placeholder="placeholder" @input="input" autocomplete="off" />
</template>

<script>
    export default{
        name: 'my-compont',
        props: {
		    value: {
			    event: 'input'
		    },
		    placeholder: {
                type: String,
			    default: ''
		    },
	},
	data() {
		return {
			curInputValue: '' //当前时刻的输入值
		};
	},
	methods: {
		//子级定义的方法
		open() {
			//具体操作
		},
		input(e) {
			let value = e.detail.value;
			this.curInputValue = value;
			this.$emit('on-input', value);
		},
	}
   }
</script>