子组件调用父组件的属性

既然子组件要调用父组件的属性，父组件就首先要有这个属性，首先在data里先定义那么一个属性值：

data(){
	return{
		addDialogVisible: false,
	}
}

好，有了可以被子组件调用的值了以后呢，东西准备好了，那就得让子组件和父组件之间建立一个联系，在父组件中引入子组件：

import saveProject from "./saveProject.vue";
export default {
//并将我们引用这个组件暴露出来
  components: { 
      "save-project":saveProject,
  	},
  }

既然引用注册完了，那就得给子组件在父组件中寻找一个容身之处，也可以说是一个接头点。
同时呢，还要给这个子组件说一下我想要给子组件用的属性，上面我们已经准备好东西了，还给这个子组件找了接头点，这里就要去他这个接头点给他他想要的东西了，这里可以看作是一个桥梁，我们通过这个桥梁把父组件和子组件连起来了

<save-project   v-bind:addDialogVisible = "addDialogVisible"></save-project>

子组件东西拿到了，他就得拿着这个东西回自己家 即子组件的vue文件中，然后他得找个东西放父组件给的东西，所以要再定义一个props来放:

export default {
  //接收父组件传来的addDialogVisible
    props:['addDialogVisible'],
    }

东西也接受了，那子组件就可以随意引用这个属性啦
比如：

<div>
	{{addDialogVisible}}
</div>

那么如果子组件不满足于现状，得寸进尺还想改变父组件的这个属性值呢？

子组件修改父组件属性值

这里我们得先搞一个触发这个改变的时间，随便定义一个按钮，绑定一个事件

<button  @click="closeDialog()">pick me!<button>

同时定义这个时间，这里重点就来啦，我们在定义这个事件内部要用到this.$emit(’ A ', B )这个语法，A是父组件中同名的方法，B是携带的参数。他就好象是一个信使，子组件通过这个信使让他去父组件组件找到名为A的人把B交给他。

closeDialog(){
      this.$emit('success',false);
   }

既然已经告诉这个信使要找一个名为success的人了，那我们得在父组件中有这么个人，让信使得找到他，所以就要在父组件中创建它，还记得之前传属性那个桥梁吗，我们就把这个人放那试试

<save-project   v-bind:addDialogVisible = "addDialogVisible"   v-on:success="success(res)"></save-project>

到这里还没结束，emit要找的人呢架子比较大，他也学子组件派了个信使，这个信使就是我们刚刚创建的v-on:success=“success(res)”
这个信使呢拿到了子组件派来的信使的东西，他就赶紧跑下去找这个方法老大，
所以我们还要在methods中定义这个方法，得让这个父组件中的信使有个老大

 methods: {
    //接受子组件的事件调用
    success(res){
        this.addDialogVisible=res;
    },
    }

ok，到这里就大功告成了，父组件终于收到了子组件的通知，然后他就会调用这个success方法，并把接受的参数res赋值给自己组件中的addDialogVisible属性~

先上代码:

<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)
        }