Vue之组件传值访问 父传子 子传父

Vue的组件具有高度的复用性，但是每个组件都是独立的一个对象，那么组件之间的传值就需要专门的记录一下，

首先是组件的使用

我们需要在被使用组件的Script中引入，然后在compoents中注册，然后使用，例子如下

<script >
import HelloWorld from './components/HelloWorld.vue'
    export default{
        components:{
            HelloWorld
        },
    }
  
</script>
<template  >
    <div>
      <HelloWorld/>
</div>
</template>

<style scoped>
</style>

然后是传值。

父传子

可以通过 prop 向子组件传值，prop可以被作为一个属性。 请记住属性是可以被v-bind绑定的一个变量  例子如下，将App组件里面的值传递给子组件

第一步 父组件定义值

        data(){
            return{
                  msg :"好好学习ba"
            }
        }

第二步 在父组件中定义一个属性，这个属性就是子组件中用的值，并且将值通过v-bind传值给子组件

<HelloWorld       :message="msg"  />

第三步子组件中通过props数组的形式获得这个属性并且可以直接在组件中使用

<script >
   export default{
      
            props:["message"]
             
        
   }
</script>

<template>
  <div >
               <h1>东京树下的绘梨衣</h1>
               <h2>{{message}}</h2>
  </div>
</template>

<style scoped>

</style>

这里我们要解析一下prop

一个组件需要显式声明它所接受的 props，这样 Vue 才能知道外部传入的哪些是 props，哪些是透传 attribute。

可以通过字符串的形式传递值，也可以通过对象的形式，优先使用对象的形式，对象的形式可以规范开发的属性，方便处理

比如

   props:{

              message :String

            }

             

也可以静态传递  不用绑定直接传值即可，

请注意 --- props是和data()一个级别的。不要写错了

通过对象的形式

      <HelloWorld     aaa=100   :message='msg' />
<script >
   export default{
       props:{
        message:String,
        aaa:Number
       }
   }
</script>

<template>
  <div >
               <h1>东京树下的绘梨衣</h1>
               <h2>{{message}}</h2>
                <h1>{{aaa}}</h1>
            
  </div>
</template>

然后是子传父

通过监听事件完成子传父的过程  。

第一步  在子组件中写传递事件 要用到传说中的$emit

首先在子组件中编写方法

 <h1   @click="sendValue">传递值给父组件</h1>

然后完善sendValue

     sendValue(){
        this.$emit("getValue",this.obj)
      
      }   

请注意，$emit中参数要是 getValue  和要传递的值（可以自己封装成数组）

意思是 点击标签后 触发 sendValue,然后触发$emit方法，然后触发getValue

在父组件中要标记子组件  如下

    <HelloWorld      @getValue="useValue"      aaa=100   :message='msg' />

在这里我们要自定义两个方法，但是getValue不用实现，它只是为了监听和触发，然后父组件中监听到getValue 触发userValue 然后我们完善useValue即可

    methods:{

                    useValue(obj){

                this.tt = obj.changshi

                    }

        },

请注意务必注意 这里需要写入传递的值和使用形参。

然后是访问（暂且未记录）