vue父组件调用子组件属性，父组件往子组件传递参数，子组件传参并触发父组件方法

先上代码:

<template>
    <div>
      <button @click="getParams">子组件属性</button>
      <com1 ref="child" @parentNotic="parentNotic" :parenParamsTest="parenParams"></com1>
    </div>
</template>

<script>
    export default {
        name: "parameterPassing",
      data() {
        return {
          parenParams: '少林张三丰'
        }
      },
      components:{
          'com1':{
            template:'<div> {{parenParamsTest}}----{{name}} </br>  <button @click="parentNotic">点击父组件会执行一个方法</button>  </div>',
            props:['parenParamsTest'],
            data () {
              return {
                name: '子组件名称',
                val: '父组件调用专用参数'
              }
            },
            methods: {
              parentNotic() {
                this.$emit("parentNotic", {'name': this.name,'val': this.val})
              }
            }

          }
      },
      methods:{
        getParams() {
          var name = this.$refs.child.name;
          var val = this.$refs.child.val;
          alert(name)
          alert(val)
        },
        parentNotic(data) {
          console.log(data)
        }

      }
    }
</script>

<style scoped>

</style>

 

父组件调用子组件属性:

定义按钮： 

<button @click="getParams">子组件属性</button>

 

声明子组件

 components:{
          'com1':{
            template:'<div> {{parenParamsTest}}----{{name}} </br>  <button @click="parentNotic">点击父组件会执行一个方法</button>  </div>',
            props:['parenParamsTest'],
            data () {
              return {
                name: '子组件名称',
                val: '父组件调用专用参数'
              }
            },
            methods: {
              parentNotic() {
                this.$emit("parentNotic", {'name': this.name,'val': this.val})
              }
            }

          }
      }

在父组件中引入子组件：

  <com1 ref="child" @parentNotic="parentNotic" :parenParamsTest="parenParams"></com1>

按钮的点击事件：

getParams() {
          var name = this.$refs.child.name;
          var val = this.$refs.child.val;
          alert(name)
          alert(val)
       }

 这里使用 

this.$refs.child.name 获取子组件的name属性

this.$refs.child.val 获取父组件的val属性

子组件注册的引用为child,所以用this.$refs.child来调用子组件属性。

 

父组件往子组件传递参数：

父组件定义属性 parenParams

 data() {
        return {
          parenParams: '少林张三丰'
        }
      }

往子组件传递:  :parenParamsTest="parenParams"

 <com1 ref="child" @parentNotic="parentNotic" :parenParamsTest="parenParams"></com1>

子组件接收:    props:['parenParamsTest']

子组件使用： {{parenParamsTest}}

 

子组件传参并触发父组件方法：

子组件声明方法:

 parentNotic() {
    this.$emit("parentNotic", {'name': this.name,'val': this.val})
   }

声明this.$emit所触发的父组件的方法： @parentNotic="parentNotic"

父组件方法:

        parentNotic(data) {
          console.log(data)
        }