Vue 组件通信/单向数据流

目录

1.组件介绍

1.全局注册使用 :

2.局部注册

2.组件-scoped作用

3.组件通信-父向子-props

4.组件通信-子向父

5.理解单项数据流

---

1.组件介绍

组件概念:可复用的vue实例, 封装标签, 样式, JS

什么时候封装组件:遇到重复标签, 可复用的时候

组件好处:各自独立, 互不影响

口诀: 哪部分标签复用, 就把哪部分封装到组件内

(重要): 组件内template只能有一个根标签

(重要): 组件内data必须是一个函数, 独立作用域

1.全局注册使用 :

1.在componets文件夹下创建组件.vue文件: 例如:新建Pannel.vue

2.在全局入口main.js中引入组件:

3.全局注册-在new Vue之上注册注册组件 :

import Vue from 'vue'
//2.引入组件
import Pannel from './components/Pannel'
//3.全局注册组件语法: 
Vue.component("PannelG", Pannel)   

4.任意Vue文件中template标签用使用组件名当做标签使用 :

全局注册PannelG组件名后, 就可以当做标签在任意Vue文件中template标签里用单双标签都可以或者小写加-形式, 运行后, 会把这个自定义标签当做组件解析, 使用组件里封装的标签替换到这个位置

<template>
  <div id="app">
    <h3>案例：折叠面板</h3>
    <!-- 4. 组件名当做标签使用 -->
    <!-- <组件名></组件名> -->
 		<PannelG></PannelG>
		<PannelG/>
		<pannel-g></pannel-g>
  </div>
</template>

2.局部注册

1.在componets文件夹下创建组件.vue文件: 例如:新建Pannel.vue

2.在任意.vue文件中引入组件:

import 组件对象 from 'vue文件路径'

3.在componnets节点下注册组件:

export default {

    components: {

        "组件名": 组件对象

    }

}

4.任意Vue文件中template标签用使用组件名当做标签使用 : <template><div><组件名><组件名></div></template>

//2.引入组件
import Pannel from "./components/Pannel.vue";
export default {
   //3.在componnets节点下注册组件
    components: {
        "Pannel": Pannel,
    }
}

2.组件-scoped作用

在style上加入scoped属性, 就会在此组件的标签上加上一个随机生成的data-v开头的属性,组件内的样式只在当前vue组件生效,解决多个组件样式名相同, 冲突问题

3.组件通信-父向子-props

注意: 父组件传递给子组件的数据, 只能由父组件修改 (props里定义的变量不能修改 prop的数据是只读的)

总结:组件封装复用的标签和样式, 而具体数据要靠外面传入

什么时候需要父传子技术:从一个vue组件里把值传给另一个vue组件(父->子)

父传子口诀(步骤)是什么: (子定义 父传递值)

• 1.在子组件内通过 props 定义变量,用于接收外部传入的值 (props的用法和data一样)
• 2.在父组件中引入子组件通过 componnets 注册组件, 使用时 传入具体数据 给子组件显示

父: 使用其他组件的vue文件

子: 被引入的组件(嵌入)

:info : 是子组件里props 定义的变量

msg : 是父组件里data的数据

例如: App.vue(父) MyProduct.vue(子)

components/MyProduct.vue - 准备标签

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

App.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>

4.组件通信-子向父

子传父流程

1.在父组件中给子组件 绑定自定义事件名 和 事件处理函数

2.在子组件中恰当的时机触发事件 并传递数据

this.$emit('自定义事件名', 参数1,参数2,...)

参数1 : (父组件)APP.vue里面的事件类型

参数2 - N : 要传递的数据

3.在父组件的事件处理函数中 接受 参数2-N 进行业务逻辑的处理

5.理解单项数据流

单向数据流:  从父到子的数据流向
子组件修改数据 不通知父级 造成数据不一致
props里定义的变量不能修改 prop的数据是只读的

单项数据流不能直接修改变量

如果父组件给子组件传递的数据是引用数据类型，那修改其内部属性不会触发单项数据流的限制

所谓的单项数据流 只会看传过来的变量是否修改，引用类型地址值如果没变就不算修改