Vue组件通信之父组件向子组件通信简单介绍与演示

Vue组件通信有父子组件之间得通信，这里我简单说下父组件向子组件进行通信的方式

---

我们废话不多说，直接上干货

1.父组件引入子组件

// 引入子组件children.vue 命名为children
import children from 'children.vue';

2.父组件注册子组件

// 在组件实例对象中写入以下对象并对组件进行注册
  components: {
    // children: children,
    // 变量名与变量值相同，可简写为以下
    children,
  },

3.父组件使用子组件模板

<!-- 这个时候我们就可以使用我们上面命名好的子组件的模板 -->
<children>我是子组件children</children>

4.父组件向子组件传递数据（通信）

1. 传递静态数据
   静态数据说的就是没有响应特点的数据，死数据
   因为没有使用v-bind所以我们无法使用父组件中的data数据

<children title="children"></children>

2. 传递动态数据
   所以如果我们需要传递父组件中的data数据
   就需要使用v-bind来传递动态data数据
   直接使用冒号 : 是我们v-bind的语法糖

// 假设我们在data中定义了这样一个变量
data() {
	return {
		msg: 'HelloVue!!!',
	}
}

<!-- 
	这里的msgWorld是我们自定义命名的给子组件当作data数据的属性
	这里的msg则是我们父组件中的data中的msg属性
 -->
<children :msgWorld="msg"></children>

5.在子组件中接收这些传递过来的动态数据

// 假设现在我们在子组件中了，我们需要给子组件vue实例中定义一个props对象
props: {
    // msgWorld要和父组件自定义模板属性名要一致
    // 当我们定义好之后，这里的属性就相当于在子组件data中定义了这些属性
    // 只不过他的值是由父组件来决定了
    msgWorld: {
      // type表明该数据的数据类型
      type: String,
      // default 代表如果没有传值,那么使用以下缺省值(默认值)
      // <children></children> --> 没有 :msgWorld 代表没有传值
      default: '未传值时使用当前值',
      // required 代表该prop是否可以不传送,即在父组件中使用自定义标签的子组件时是否必须传当前的prop
      // required和default是冲突的 因为必须传那么又为何需要default呢?
      required: true,
    },
  },

如果你想要了解更多props信息可以访问vue官网查看相关文档，这里不多做解释

6.在子组件中使用这些动态数据

<h1>{{msgWorld}}</h1>
<!-- 你data是怎么用的，这里的数据就可以怎么用了 -->

总体而言父组件向子组件进行通信就是这么几步啦！如果对你有帮助不妨点个👍 b(￣▽￣)d ，有错误的地方还请指正，萌新刚学Vue，还在起步阶段！