vue父子组件通信

父传子

props 参数

• 子组件接收

  在子组件的props中定义要接收的参数，可设置参数类型以及默认值。

  export default{
  	props:{
  		msg:{
  			type:Number,
              default:0
          }
      }
  }
  

• 父组件传值

  引入组件后，在子组件标签中向参数传入值

  <Child :msg="data"></Child>
  

  export default{
  	data(){
          return{
              data:1
          }
      }
  }
  

• 子组件获取值

  created(){
  	console.log(this.msg);//1
  }
  

ref 调用

• 子组件定义接收方法

  定义函数并接收参数，父组件调用并传参既可将数据传到子组件中

  export default{
  	methods:{
  		getParent(data){
              console.log(data);
          }
      }
  }
  

• 父组件传参

  使用ref绑定子组件后，调用子组件方法并传参

  <Child ref="abc"></Child>
  

  this.$refs.abc.getParent('abc123')//"abc123"
  

子传父

emit 触发

• 子组件中订阅事件并触发

  子组件订阅一个事件，当事件被触发时，再通过$emit触发父组件订阅的事件，并传递参数

  <div @click="event"></div>
  

  export default{
  	methods:{
  		event(){
              /** 触发组件watch事件并传参 */
  			this.$emit('watch','abc123')
          }
      }
  }
  

• 父组件中绑定事件

  <Child @watch="event"></Child>
  

  export default{
  	methods:{
          event(arg){
  			conosole.log(arg)//"abc123"
          }
      }
  }
  

parent 调用

通过使用$parent调用父组件方法并传参，实现向父组件传值

• 父组件中定义方法

  export default{
  	methods:{
  		fn(arg){
  			console.log(arg);
          }
      }
  }
  

• 子组件中调用父组件方法

  this.$parent.fn('abc123') //"abc123"
  

作用域插槽

• 子组件中存放

  子组件在插槽中存放数据

  <slot :value="msg"></slot>
  

  export default{
  	data(){
          msg:{
  			name:"abc",
              number:123
          }
      }
  }
  

• 父组件获取

  父组件使用插槽时，可获取到插槽中存放的数据

  <Child>
  	<div slot-scope="props">
          <p>
              {{props.value.name}}
              <!-- abc -->
          </p>
      </div>
  </Child>