SvelteJS:将数据传递给组件
SvelteJS:将数据传递给组件
提问于 2018-09-18 17:04:48
我目前正在将一个使用VueJS的Laravel应用程序迁移到SvelteJS (将Vue部分替换为Svelte)。
使用VueJS，我可以很容易地向页面上安装的组件发送道具：
<users :name="John Doe"></users>然后在组件中访问名称prop。
在Svelte中，当道具嵌套时，我只能在组件中传递和访问它们。
App组件:我可以引用user组件并发送道具
<h1>Hello {name} - { count }</h1>
<h1>Employees of VONIDI</h1>
<Users villain="Jean Claude Van Damme" hero={employees} />
<ul>
{#each employees as employee}
<li><a target="_blank" href={employee}>{employee}</a></li>
{:else}
<li>No employee :(</li>
{/each}
</ul>
<form on:submit="processForm(event)">
<input bind:value=form.name type=text>
<input ref:date id="date" bind:value=form.date type=text>
<label>
<input type='checkbox' bind:group='form.colours' value='red'>
red
</label>
<label>
<input type='checkbox' bind:group='form.colours' value='blue'>
blue
</label>
<button type=submit>Say hello</button>
</form>
<button on:click="set({ count: count + 1 })"> +1 </button>
<button on:click="set({ count: count - 1 })"> -1 </button>
<style>
h1 {
color: purple;
}
</style>
<script type="text/javascript">
import axios from 'axios';
import flatpickr from 'flatpickr';
import "flatpickr/dist/themes/dark.css";
export default {
components: {
Users: './users.svelte'
},
data() {
return {
count: 0,
name: 'WORLD',
employees: [],
form: {
name: '',
colours: [],
date: ''
}
};
},
oncreate() {
console.log('Created TAG!');
this.loadStudents();
console.log(this.options);
flatpickr('#date', {
mode: "range",
minDate: "today",
dateFormat: "Y-m-d",
disable: [
function(date) {
// disable every multiple of 8
return !(date.getDate() % 8);
}
]
});
},
methods: {
getStudents() {
return axios.get('/employees');
},
async loadStudents() {
let response = await this.getStudents();
this.set({
employees: response.data
});
const emp = this.get();
console.log(emp);
},
processForm(event) {
event.preventDefault();
const tagline = this.get();
console.log(tagline);
alert(`Hello ${tagline.form.name}!`);
}
}
};
</script>用户组件：
<h4>Employees from User Tag: {hero}</h4>
<h2>Villain: { villain }</h2>
<script>
export default {
tag: 'users-tag',
oncreate() {
console.log('User component created!')
console.log( this.get() )
}
};
</script>但是我不知道如何向未嵌套的组件发送道具，即:在独立的用户组件中，我无法发送道具。
<users villain="Jean Claude Van Damme" hero="One"></users>对于prop值，我总是得到一个未定义的错误。关于如何实现这一点有什么想法吗？
谢谢
回答 1
Stack Overflow用户
发布于 2018-09-19 23:21:36
如果我理解正确的话，您正在尝试在组件初始化之后修改它的数据。
When you initialize the component you do something like:
var mything= new Thing({
target: someplace,
data: {text:"some text",status:" works good"}
});稍后，如果您需要更改数据，可以执行以下操作：
mything.set({text:"new text");页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52382875
复制相关文章
相似问题
腾讯云开发者
