初学Vue.js:props

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了初学Vue.js:props相关的知识,希望对你有一定的参考价值。

参考技术A 看一下官方文档:

也就是 props 是子组件访问父组件数据的唯一接口。

详细一点解释就是:

一个组件可以直接在模板里面渲染data里面的数据(双大括号)。

子组件不能直接在模板里面渲染父元素的数据。

如果子组件想要引用父元素的数据,那么就在prop里面声明一个变量(比如a),这个变量就可以引用父元素的数据。然后在模板里渲染这个变量(前面的a),这时候渲染出来的就是父元素里面的数据。
 

 

 

当父组件的属性变化时,将传导给子组件,但是反过来不会。

每次父组件更新时,子组件的所有 prop 都会更新为最新值。

不要在子组件内部改变 prop。如果你这么做了,Vue 会在控制台给出警告。

在两种情况下,我们很容易忍不住想去修改 prop 中数据:

对这两种情况,正确的应对方式是:
定义一个局部变量,并用 prop 的值初始化它:

定义一个计算属性,处理 prop 的值并返回:

 
注意在 javascript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。

举个例子:

 

可以为prop指定验证规则,如果传入的数据不符合要求,Vue会发出警告。

具体验证规则见官方文档: Prop验证规则
 

$parent 也可以用来访问父组件的数据。

而且子组件可以通过$parent 来直接修改父组件的数据,不会报错!

可以使用props的时候,尽量使用props显式地传递数据(可以很清楚很快速地看出子组件引用了父组件的哪些数据)。

另外在一方面,直接在子组件中修改父组件的数据是很糟糕的做法,props单向数据流就没有这种顾虑了。

vue.js 不知道如何通过 props 将数据传递给另一个组件

【中文标题】vue.js 不知道如何通过 props 将数据传递给另一个组件【英文标题】:vue.js I don't know how to pass data to another component via props 【发布时间】:2020-10-11 04:28:39 【问题描述】:

我是vue的初学者。最近开始学习vue。 我在我的 vue 组件中添加了一个道具。 我认为代码似乎是正确的。 但是发生了错误。有人告诉我如何将字符串或数字传递给 childComponent 以及如何检查它。

ERROR in ./resources/js/components/App.vue?vue&type=template&id=1da0bc8e& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vuetify-loader/lib/loader.js??ref--11-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/App.vue?vue&type=template&id=1da0bc8e&)
Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error) 

  Errors compiling template:

  text "test_id" outside root element will be ignored.

  1  |  
     |   
  2  |  test_id
     |  ^^^^^^^^^^^^
  3  |    <v-app>

App.vue

<template>
test_id
  <v-app>
  </v-app>
</template>

<script>

  export default 
    name: 'App',
    components: 
      Test
    ,
    props: 
      test_id : String
    ,
  
</script>
从'./plugins/vuetify'导入vuetify;

Vue.component('stack', require('./components/App.vue').default);

const app = new Vue(
    埃尔:'#app',
    验证,
);

sample.blade.php

<script src="  mix('js/test.js') " defer></script>
<div id="app">
<stack test_id="111"></stack>
</div>

【问题讨论】:

您的问题标题和问题正文似乎不匹配。您得到的错误是因为组件需要恰好有一个根元素。在您的情况下,您希望 &lt;v-app&gt; 成为该根元素。您必须将 test_id 移动到该元素中,一切正常。此外,在 Vue 生态系统中的几乎任何地方,我们都使用 camelCase 变量来识别内容,因此您可能希望继续这种趋势以获得更简洁的代码。 非常感谢...哦,这就是编译器说“外部根元素”的原因。我明白了。 【参考方案1】:

根中的元素太多,用包装器将它们括起来:

<template>
  <div>
   test_id
   <v-app>
   </v-app>
  </div>
</template>

【讨论】:

以上是关于初学Vue.js:props的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js初学

初学者可能不知道的 vue.js技巧

vue.js初学,笔记1,安装

初学Vue.js

初学Vue.js:props

Vuejs365- 初学者可能不知道的 vue.js技巧