Vue组件基础

1.基本概念:

组件就是一个集html  css  js 组合在一起的可复用的vue文件  

2.基础封装组件:

1.创建一个(组件).vue的文件/输入你需要的结构
2.导入创建的.vue文件  import pomer from  你创建文件的路径  './components/Pmoner.vue' 
3.注册组件
export default {
  components:{
     pomer  // 导入与使用名相同则省略
  }
  }
 4.最对应结构使用 ,把组件名当标签使用
 <template>
 <div id="app">
    <pomer></pomer>
    <pomer></pomer>
    <pomer></pomer>
     </div>
 </template>

具体写法如下

//父Vue
<template>
  <div>
    <!-- 
      目标: 父(App.vue) -> 子(MyProduct.vue) 分别传值进入
      需求: 每次组件显示不同的数据信息
      步骤(口诀):
        1. 子组件 - props - 变量 (准备接收)
        2. 父组件 - 传值进去
     -->
    <Product title="好吃的口水鸡" price="50" intro="开业大酬宾, 全场8折"></Product>
    <Product title="好可爱的可爱多" price="20" intro="老板不在家, 全场1折"></Product>
    <Product title="好贵的北京烤鸭" price="290" :intro="str"></Product>
  </div>
</template>

<script>
// 1. 创建组件 (.vue文件)
// 2. 引入组件
import Product from './components/MyProduct'
export default {
  data(){
    return {
      str: "好贵啊, 快来啊, 好吃"
    }
  },
  // 3. 注册组件
  components: {
    // Product: Product // key和value变量名同名 - 简写
    Product
  }
}
</script>

<style>

</style>

//子组件 -----------------------------------------------------------------------
<template>
  <div class="my-product">
    <h3>标题: {{ title }}</h3>
    <p>价格: {{ price }}元</p>
    <p>{{ intro }}</p>
  </div>
</template>

<script>
export default {
  props: ['title', 'price', 'intro']
}
</script>

<style>
.my-product {
  width: 400px;
  padding: 20px;
  border: 2px solid #000;
  border-radius: 5px;
  margin: 10px;
}
</style>

3.组件通信

1.父传子

父传子  谁被引用谁是儿子 
具体实现方式:
通过属性绑定.在父级里面标签里添加属性.
 <Product title="好吃的口水鸡" price="50" intro="开业大酬宾, 全场8折"></Product>
然后在子文件里通过props 接受对应的属性名
export default {
  props: ['title', 'price', 'intro']
}
然后在子文件对应的结构里插值
<template>
  <div class="my-product">
    <h3>标题: {{ title }}</h3>
    <p>价格: {{ price }}元</p>
    <p>{{ intro }}</p>
  </div>
</template>
父:App.vue
子:MyProduct.vue

2.父传子配合循环使用

<template>
  <div>
    <!-- 
      目标: 父(App.vue) -> 子(MyProduct.vue) 分别传值进入
      需求: 每次组件显示不同的数据信息
      步骤(口诀):
        1. 子组件 - props - 变量 (准备接收)
        2. 父组件 - 传值进去
     -->

//循环获取标签. 然后申明对应的变量
    <Product v-for="obj in list" :key="obj.id"
    :title="obj.proname"
    :price='obj.proprice'
    :intro='obj.info'
    ></Product>
    </div>
</template>

<script>
// 1. 创建组件 (.vue文件)
// 2. 引入组件
import Product from './components/MyProduct'
export default {
  data(){
    return {
      list: [
    { id: 1, proname: "超级好吃的棒棒糖", proprice: 18.8, info: '开业大酬宾, 全场8折' },
    { id: 2, proname: "超级好吃的大鸡腿", proprice: 34.2, info: '好吃不腻, 快来买啊' },
    { id: 3, proname: "超级无敌的冰激凌", proprice: 14.2, info: '炎热的夏天, 来个冰激凌了' },
],
    }
  },
  // 3. 注册组件
  components: {
    // Product: Product // key和value变量名同名 - 简写
    Product
  }
}
</script>

<style>

</style>

//子组件--------------------------------------------------------------------

<template>
  <div class="my-product">
    <h3>标题: {{ title }}</h3>
    <p>价格: {{ price }}元</p>
    <p>{{ intro }}</p>
  </div>
</template>

<script>
export default {
  props: ['title', 'price', 'intro']
}
</script>

<style>
.my-product {
  width: 400px;
  padding: 20px;
  border: 2px solid #000;
  border-radius: 5px;
  margin: 10px;
}
</style>

3.单向数据流

目标: props变量本身是只读不能重新赋值

目标：从==父到子==的数据流向,叫==单向数据流==

原因: 子组件修改, 不通知父级, 造成数据不一致性

如果第一个MyProduct.vue内自己修改商品价格为5.5, 但是App.vue里原来还记着18.8 - 数据 不一致了

所以: Vue规定==props==里的变量, ==本身是只读==的

 注意:  

       如果需要子修改的同时影响到父亲,然后数据响应式互相响应.则需要子向父

4.子向父

子通过事件触发父里面的函数

通过子事件触发父里面的函数
1.在子设置一个事件.通过 this.$emit(事件名,要传递的数据)
this.$emit('hello')
2.在父设置对应的事件名  
@hello='ffn'  函数名  
3.在父定义ffn函数   

代码如下

//子组件
<template>
  <div>
      <button @click="btn">子事件触发父函数</button>
  </div>
</template>

<script>
export default {
  methods:{
      btn(){
          this.$emit('handFn')
      }
  }
}
</script>

<style>

</style>

----------------------------------------------------------------------------------------
//父
<template>
  <div>
      <button @click="btn">子事件触发父函数</button>
  </div>
</template>

<script>
export default {
  methods:{
      btn(){
          this.$emit('handFn')
      }
  }
}
</script>

<style>

</style>

当需要传值改变父里面的属性的时候.则需要

@emit(随便写的函数名,传递的值)

父函数接受到对应的值进行修改.

//子组件
export default {
  methods:{
      btn(){
          this.$emit('handFn','需要传递的值')
      }
  }
}


---------------------------------------------------------------------------------------

//父组件
<template>
  <div>
    <p>{{msg}}</p>
   <hello 
   @handFn='fn'
   ></hello>
  </div>
</template>

<script>
import hello from './components/old.vue'
export default {
  data(){
    return{
  msg:'你好'
    }
  },
  components:{
    hello
  },
  methods:{
    fn(num){
      this.msg = num
    }
  }
}
</script>