VUE组件化理解(一)组件之间的传值方法调用

VUE组件化理解(一)

父组件传值给子组件

1.属性props

// parent.vue

<template>
  <div class="hello">
    <h1>父组件</h1> 
    <div style="padding-bottom:150px">
      <Children :value='parenttochildren' />
    </div>
  </div>
</template>
<script>
  import Children from './children.vue'
  export default {
    name: 'HelloWorld',
    components: {
      Children
    },
    data() {
      return {
         parenttochildren: '父组件传给子组件的值' 
        // parenttochildren: {
             //   mm:'121',
             //   num:0
        // },
      }
    }
  }
</script>

// children.vue

<template>
  <div>
    <h2>标题：子组件 {{value}}</h2>
    <!-- <h2>标题：子组件 {{value.mm}}</h2> -->
  </div>
</template>
<script>
  export default {
    props: {//接受父组件所传值
      value:{
        type:String, // Object
        required: true,
        default:''
      } 
    },
    data() {
      return {
      }
    }
  }
</script>

props 类型 type 可以是下列原生构造函数中的一个：

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

2.子元素$children

当前实例的直接子组件。需要注意 $children 并不保证顺序，也不是响应式的。如果你发现自己正在尝试使用 $children 来进行数据绑定，考虑使用一个数组配合 v-for 来生成子组件，并且使用 Array 作为真正的来源。

// parent.vue
this.$children[0].xx = xx

子组件传值给父组件

是通过方法传递的，也相当于子组件调用父组件方法：

// parent.vue

<template>
  <div class="hello">
    <h1>父组件</h1>
    <h2 @click='getClick'>获取子组件的值</h2>
    <div style="padding-bottom:150px">
      <Children ref='child' :value='parenttochildren' v-on:getValue='onClick' />
    </div>
  </div>
</template>
<script>
  import Children from './children.vue'
  export default {
    name: 'HelloWorld',
    components: {
      Children
    },
    data() {
      return {
        parenttochildren: '父组件传给子组件的值'
      }
    },
    methods: {
       //得到子组件值方法一：
      onClick(val) {
        //val就是子组件传过来的值
        console.log(val) //传给父组件的值
      },
       //得到子组件值方法二：
      getClick() {
        let end = this.$refs.child.message
        console.log(end) //传给父组件的值
      }
    }
  }
</script>

// children.vue

<template>
  <div>
    <h2 @click='toSendVal'>标题：子组件 {{value}}</h2>
  </div>
</template>
<script>
  export default {
    props: {//接受父组件所传值
      value: {
        type: String,
        required: true,
        default: ''
      }
    },
    data() {
      return {
        message: '传给父组件的值'
      }
    },
    mounted() {
    },
    methods: {
      toSendVal() {
        // getValue是在父组件on监听的方法
        // 第二个参数this.message是需要传的值
        this.$emit('getValue', this.message)
      }
    }
  }
</script>

父子组件方法相互调用：

Vue不提倡用原生的dom操作获取节点，它封装了自己的方法来实现获取dom
做法：
给要获取的dom一个ref属性，起一个名字，通过this.$refs来得到组件里所有有ref属性的dom节点，返回的是一个json

// parent.vue
 <helloworld ref ="hw">< helloworld>
 this.$refs.hw.xx = xx

// parent.vue

<template>
  <div class="hello">
    <h1>父组件</h1>
    <h2 @click='getClick'>调用子组件的方法</h2>
    <div style="padding-bottom:150px">
      <Children ref='child' :value='parenttochildren' :parentGetdata='parentGetdata' v-on:getValue='onClick' />
    </div>
  </div>
</template>
<script>
  import Children from './children.vue'
  export default {
    name: 'HelloWorld',
    components: {
      Children
    },
    data() {
      return {
        parenttochildren: '父组件传给子组件的值'
      }
    },
    methods: { 
      onClick(val) { 
        console.log(val) //传给父组件的值
      }, 
      parentGetdata(){
       console.log('父组件的方法')
      },
      getClick(){ // 父组件调用子组件的方法：
       this.$refs.child.getData() //子组件方法
      } 
    }
  }
</script>

// children.vue

<template>
  <div>
    <h2 @click='toSendVal'>标题：子组件 {{value}}</h2>
    <h3 @click='onClick'>子组件调用父组件的方法</h3>
  </div>
</template>
<script>
  export default {
    props: {//接受父组件所传值
      value: {
        type: String,
        required: true,
        default: ''
      },
      parentGetdata: {
        type: Function,
        default: null
      }
    },
    data() {
      return {
        message: '传给父组件的值'
      }
    },
    mounted() {
    },
    methods: {
      // 子组件调用父组件的方法
      //方法1：
      toSendVal() {
        this.$emit('getValue', this.message)
      }, 
      onClick() {
        // 方法2：
        // this.$parent.parentGetdata()
        //方法3
        if (this.parentGetdata) {
          this.parentGetdata()
        }
      },
      getData() {
        console.log('子组件方法')
      }
    }
  }
</script>

父组件调用子组件的方式：

• 通过$ref.子组件ref属性名，给子组件定义一个ref属性
  子组件调用父组件的3种方式：
• 通过$emit
• 通过$parent和$root
• 通过父组件把方法传给子组件

非父子组件之间的方法调用（es6方法）

//B模块
import A from 'A的相对路径’
然后调用方法
A.methods.方法函数名()
会改变this指向

**

非父子组件传值

**

建议使用VUEX中共享仓库
this.id = this.$store.state.(sotre中定义的值);
或者
Bus使用空vue实列做中央数据中线；
定义Bus.js

// Bus.js

import Vue from "vue";
var Bus = new Vue();
export default Bus;
在A中，Bus.$emit('getVm',child);
在B中，
Bus.$on('getVm', function (data) {
	self.percent = data.name;
	console.log(self.percent);
})

bus 好像是1.0废弃dispatch和broadcast之后 出来的 解决方案