个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我是 vuejs 新手，当我查看其文档时，我无法从其“组件”部分工作中获取此示例代码:
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="example">
<input type="text" v-model="parentMsg">
<br>
<child v-bind:message="parentMsg"></child>
</div>
Javascript:
Vue.component('child', {
props: ['message'],
template: '<span>testing: {{ message }}</span>'
})
new Vue({
el: '#example'
})
我的理解:模型的值可以传递给子组件的消息属性，只要我在输入文本框中键入任何内容，“testing:”后就会显示相同内容的字符串。这并没有发生。
我测试了 jsfiddle 中的代码
最佳答案
#example 的 Vue 实例应该包含数据 parentMsg。然后， child 和家长都可以使用它。因此，您需要在 Vue 实例中添加数据。
new Vue({
el: '#example',
data: function() {
return { parentMsg: "Hi" };
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://unpkg.com/vue"></script>
</head>
<script type="text/javascript">
Vue.component('child', {
props: ['myMessage'],
template: '<div>{{ myMessage }}</div>'
});
Vue.component('two-items-child', {
props: ['firstName', 'lastName'],
template: '<div><div>{{ firstName }}</div><div>{{ lastName }}</div></div>'
});
</script>
<body>
<div id="app">
<input id="inputParent" type="text" placeholder="parent" v-model="parentMsg">
<br>
<child my-message="Hi Vue."></child>
<two-items-child v-bind="wholeObj"></two-items-child>
<child :my-message="parentMsg"></child>
</div>
<script type="text/javascript">
// root instance
var vm = new Vue({
el: '#app',
data: {
parentMsg: "first msg",
wholeObj: {
firstName: "Hong",
lastName: "Gil-dong"
}
}
});
</script>
</body>
</html>检查上面的例子 example 。该示例将数据作为对象，但这不是一个好方法。另请检查data must be a Function
关于javascript - 这个 vuejs "prop down"示例有什么问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48759617/
26
4
0
我仍在学习如何将 API 数据与 react 和 nextjs 一起使用。但是，为什么我的函数只在我编写 {props.props.title} 而不是我期望的 {props.title} 时起作用？
我仍在学习如何将 API 数据与 react 和 nextjs 一起使用。但是，为什么我的函数只在我编写 {props.props.title} 而不是我期望的 {props.title} 时起作用？
我正在用 TypeScript 构建一个 React 应用程序。我有一个 RequiresPermission基于谓词的组件应该渲染一个或另一个组件并转发所有 Prop 。 type Props =
我想通过 gatsby 布局传递我所有的 props。例如: import React, { Component } from 'react'; export default class Exampl
如果我使用合成属性，那我为什么不直接说: self.property = nil; 这将释放引用计数，并确保我没有悬挂指针。 看起来很简单，但我看到的 99% 的代码似乎都是这样做的: [proper
Eslint 抛出 eslint(react/prop-types) 错误，尽管已经声明了 propTypes。我正在使用 eslint-plugin-react 我研究了其他几个类似的问题以及 li
我正在使用以下由 linter eslint-plugin-react 解析的代码。它返回警告: "product is missing in props validation" 当我在底部的 pro
我正在尝试在 React 应用程序中添加 TypeScript。 版本: "react": "16.9.0", "typescript": "3.5.3", 我有一个像这样的数组 import aLo
我有一个组件 . 如果组件没有 this.props.children , 我想设置 Prop ariaLabel作为isRequired ，否则 in 可以是可选的。我该怎么做？ ariaLabe
我应该用一个代替另一个吗？一起使用它们更好吗？谢谢。 最佳答案 prop in obj 检查 obj 是否有名为 prop 的属性，即使它只是从原型(prototype)继承而来。 obj.hasOw
我的组件 Text有 2 个 Prop :isHideable: boolean和 hidden: boolean .我如何允许 Hidden仅在 isHideable 时作为 Prop 是true
我试图将带有一些 Prop 的功能组件发送到另一个组件，并在接收组件中尝试键入检查该组件的某些 Prop 。这是代码: // BaseButton.tsx export type ButtonProp
是否可以从也作为 prop 传递的未知组件推断出正确的 props 类型？ 如果已知组件(存在于当前文件中)，我可以获得 Prop : type ButtonProps = React.Compone
我对 react 还很陌生，这是我正在努力解决的问题。 有一个父组件 家长 它将 Prop 传递给 child 。 其中一个 Prop ，包括一个要渲染的元素，如下所示: 在子组件中，我想获取这个组
我想做一个 Tabs推断 active 的可能值的组件prop 基于它的 child 拥有的东西 name Prop 。这就是我尝试这样做的方式: import React from 'react'
我对 react 还很陌生，并且只有当用户开始向下滚动时，我才尝试将更多信息加载到记录数组中。问题是新信息出现在数组中，但如果您尝试调用它，它将返回undefined。我在这里不明白什么？ 父组件:
因此，如果我对一个组件有很多不同的 Prop ，我希望我可以做类似的事情 const { ...props } = props; 而不是 const { prop1, prop2, prop3, ..
这是我寻求指导的问题类型，因为我不确定我正在寻找的内容是否存在...... 上下文:我正在使用 Firestore 来保存数据，并且正在构建一个可重用的自定义 Hook (React 16.8)，以便
我有一个 React 组件，它获取一个配置对象作为 prop，它看起来像这样: { active: true, foo: { bar: 'baz' } } 在
如何附加另一个属性？我有一个 react 组件，其中有人传入 ...props，我想附加一个额外的 Prop 最佳答案 请记住，传递 Prop 的顺序将决定将哪个值传递给该组件。这适用于有两个同名
我是一名优秀的程序员,十分优秀！