vue，组件传值

组件的传值:

1. 父传子：

1.在父组件中给子组件中设置一个属性，在这个属性上挂载要传递的值。

2.在子组件中用props来接受数据

3.props可以传递的类型有：

• String(字符串)
• data(对象)
• Bollean(布尔值)
• Array(数组)
• Number(数字)

• 父组件：（组件名称：Father）

  <template>
      <div>
         // 调用子组件;
         <Children  
            v-for='(item,index) in goods'
            :key='index'
            :title='item.title'
            :price='item.price'
         >   
         </Children>   
      <div>
  </template>
  <script>
      import Children from '@/Children'
      export default{
          // 这里是注册组件
          components:{
              Children，
          }
          data(){
              return{
                  goods:[
                      {
                          title:"柚子小哥哥"，
                          price:10,
                      },
                      {
                          title:"柚子小哥哥",
                          price:20,
                      }
                  ]
              }
          }
      }
      
  </script>
  <style scoped>
  <style>
      
  

• 子组件：(组件名称：Children)

  <template>
      <div>
         <p> {{title}} </p>
         <p> {{price}} </p>
      <div>
  </template>
  <script>
      export default{
          props:[
              title:String,
              price:Number,
          ],
      }
      
  </script>
  <style scoped>
      //这里的scoped是局部的css样式，
      // 这里没有加scoped的话是全局的css样式
  <style>
  
  

2. 子传父:

1. 在子组件中自定义事件名称，在这个自定义事件名称绑定上要执行的函数。
2. 在父组件中使用 this.$emit ("自定义事件名称 ") 来执行这个函数

• 父组件：（组件名称：Father）

  <template>
      <div>
         <span @Hello=‘World’> 父组件1</span>
      </div>
  </template>
  <script>
      export default{
       data(){
           return{}
       },
        methods:{
            World(str){
                console.log('这是父组件的..'str)
            }
        }
  }
  </script>
  <style scoped>
  </style>
  

• 子组件：(组件名称：Children)

  <template>
      <div>
         <Button @click=‘’text>调用父组件的函数方法</button>
      </div>
  </template>
  <script>
      export default{
       data(){
           return{}
       }，
       methods：｛
          text(){
              let str='柚子小哥哥'，
              this.$emit('Hello',str)
          }
     ｝
  }
  

~~~

3. 兄弟组件传值：

我们在做项目的时候，会遇到组件传值，有父传子，子传父，兄弟传值，在遇到大型项目的时候，会用到vuex。

######　　兄弟组件传值的思路是：

子传父：给按钮botton绑定一个handleClick事件，事件中我们通过 this.$emit(）方法去触发一个自定义事件，并传递我们的参数。示例中我们通过this.$emit()去触发isLogFn 这个方法自定义事件，并将log 参数传递出去。我们要在父组件中去监听这个自定义事件，去触发对应的方法，并接受a组件传过来的参数。此时我们就完成了子组件向父组件传值的过程。然后b组件中需要创建props，定义一个isLog 属性，这个属性就是我们传过来的数值。然后我们在计算属性中处理这个数据，最终供b组件使用。示例中，我们在v-show=”isLogin” 中用来控制弹窗是否打开。
a.vue 子组件

• 子组件

<template>
  <div>
    <button type="button" @click="handleClick">弹窗</button>
  </div>
</template>
<script>
export default {
  methods: {
    handleClick () {
      this.$emit('isLogFn','log')
    }
  }
}
</script>
<style>
</style>

• 父组件

<template>
  <div>
    <aPage @isLogFn = "lisLogFn"></aPage>
    <bPage :isLog = "login"></bPage>
  </div>
</template>
<script>
import aPage from './components/a.vue'
import bPage from './components/b.vue'
export default {
  data () {
    return {
      login: 'false'
    }
  },
  name: 'app',
  components: {
    aPage,
    bPage
  },
  methods: {
    lisLogFn (data) {
      if (data == 'log') {
        this.login = 'true'
      }
    }
  }
}
</script>

• 子组件：

<template>
  <div   v-show="isLogin">我是组件B弹窗</div>
</template>

<script>
export default {
  props: ['isLog'],
  data () {
    return {

    }
  },
  //不能直接使用这个props，一定要经过computed处理，因为props是单项数据流，当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意间修改了父组件的状态，否则Vue 会在控制台给出警告。
  computed: {   
    isLogin () {
      if(this.isLog == 'true'){
        return true
      } else {
        return false
      }
    }
  }
}
</script>