022 props组件交互

.vue 的文件，就是一个组件，每个.vue 文件就是每个页面
html 的时候，每个页面都是一个 html
vue2 和 vue3 的生命周期钩子是不同的
components：常用的组件，公共的组件
views：用来存放页面的

 

 

新建项目，删除HelloWorld.vue

 components也删除

views删除

 这个index.js删除

 这两页面删掉一些没用的，这样

 

 

 

 

 

 

 

新建文件夹components

 新建文件Children.vue

 这样写

 这个页面这样写

 把Children.vue引入到App.vue当中

import Children from './components/Children.vue';

或者

import Children from '@/components/Children.vue';

(@：是路径别名。（在jsconfig.json文件中说明）)

 注册组件：components: {Children },

 使用组件：

<Children></Children>

 我现在想在 app.vue 中给 children.vue 中进行一个的传值操作

1、父组件向子组件进行传值：props

第一步：在Children上面加一个动态绑定的值

:msg="message"

第二部：在data(){return{ 这里}}，进行声明

message:'这是App.vue父组件的值'

完成这两步父组件已经完事了，剩下在是子组件进行一个接受

 第三步：在子组件里面定义一个props

props{}

第四步：传值 

传那个值？传的是msg这个动态的，这里面能写message应该写 : 后面（v-bind）绑定的值

 把这个值写到props:{}里面

 他是个对象，他有两个值：

type:传这个值是什么类型的。这里是字符串类型的我们给他一个String

default:''意思是如果父组件没有传过来值，这里给他 一个默认的值。在这里我们这样写default:'这是默认的值'

 最后，因为是动态的值，所以这里改成这样：

 2、子组件向父组件进行传值：emit（自定义事件）

第一步：创建一个自定义事件。这里创建一个点击事件

 <button @click="emit">子组件向父组件进行传值</button>

 第二步：在methdos：{}里面定义这个事件，在传两个参数

第一个参数“hhh”是：自定义事件的名字。第二个参数“子组件向父组件传值”是：传的值。

  emit(){ this.$emit('hhh',"子组件向父组件传值")}

 这个自定义事件在哪里去写呢，这时候返回我们的App.vue