vue组件的基础 父子组件的传值

vue组件的基础 父子组件的传值

在我们vue项目目录中有个components文件在里面我们是专门注册组件的

创建组件

创建组件就跟我们创建一个vue文件一样的，它也有单独的data,methods,周期等，创建组件有全局创建和局部创建，但是我们几乎都只会用局部创建很少会用到全局创建，全局创建在打包时不管你用没用到都给你一起打包，局部我们创建过后了除自身不会使用，其余想在那使用就在那引入就行。

使用组件

父子组件之间的传值

通过props实现父组件向子组件传值

**父组件中**

子组件中

传递静态或动态的prop

prop类型可以是数组、对象方法等vue官网都有提到
添加链接描述
当传入一个对象并且我们要传入这个对象的所有的属性时

post: {
  id: 1,
  title: 'My Journey with Vue'
}
<component v-bind="post"></component >//等同于下面那行代码
<blog-post v-bind:id="post.id" v-bind:title="post.title"></blog-post>

单向数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
另外，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

//当我们需要改变从prop中获取到的值
//1、我们可以将获取到的值在本地的data里面进行初始化保存
props: ['initialCounter'],
data() {
  return {
    counter: this.initialCounter
  }
}
//或者通过computed属性也是可以的
props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

引用数据类型则不行，除非我们新开辟引用地址来将其保存，不新开的话因为都指向同一个引用地址所以不管父子任何一方改变，都会影响到用到该数据的地方

通过自定义事件实现子组件向父组件传值

父组件

子组件中

在组件上还可以使用v-model但我怎么用过，有需要的话可以移步vue官网进行查看

插槽 slot

父组件

子组件

v-is

<table>
  <blog-post-row></blog-post-row>
</table>
//因为一些html标签的原因，这种嵌套不对是不能正确渲染的，得写下面那种

<table>
  <tr v-is="'blog-post-row'"></tr>//这里要注意 blog-post-row要是字符串才行
</table>

还有动态组件 这些偶尔给我们提供帮助 可以到官网进行查看
地址：
https://www.javascriptc.com/vue3js/guide/component-basics.html#%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6