Во vue2 я делал так:
# file_name.html.erb
<div class="vjs">
<div is=“MyComponent”
:props1="<%= @props1 %>"
:props2="<%= @props2 %>"
>
</div>
</div>
#MyComponent.vue
<template></template>
export default {
name: "My”Component,
props: {
props1: Object,
props: Array,
},
А как во вью3 теперь передавать из разметки?
Не знаю правильно ли это с VUE ни когда дел не имел но чат говорит так можно В Vue 3 синтаксис для передачи props из разметки изменился незначительно. Вот пример, как передать props во Vue 3: html Copy code <template> <div class="vjs"> <MyComponent :props1="props1" :props2="props2"></MyComponent> </div> </template> <script> import MyComponent from './MyComponent.vue'; export default { components: { MyComponent }, data() { return { props1: /* значение props1 */, props2: /* значение props2 */ }; } }; </script> В файле разметки вы используете двоеточие (:) перед именем атрибута, чтобы указать, что вы передаете данные из родительского компонента в дочерний компонент. Значения props props1 и props2 могут быть определены внутри объекта data или получены из других источников. Обратите внимание, что вы должны импортировать компонент MyComponent и зарегистрировать его в секции components вашего родительского компонента. В самом дочернем компоненте MyComponent вы должны объявить свойства (props) и использовать их внутри компонента: html Copy code <template> <!-- Используйте свойства props внутри шаблона компонента --> </template> <script> export default { name: "MyComponent", props: { props1: Object, props2: Array } }; </script> Обратите внимание, что в Vue 3 больше нет необходимости экспортировать пустой template блок. Если у вас нет содержимого для шаблона, вы можете просто опустить его. Надеюсь, это поможет вам передавать props во Vue 3!
Обсуждают сегодня