There are several components that have the same code in the template section. All components are single-file components. Are there any mechanisms to remove the template section in an external file and then connect it to the components?

 <template> <h1>Заголовок</h1> <p>текст</p> </template>

Thank.

  • Please provide at least an approximate code of how it looks from you - Danil Chugaev
  • @ DanilChugaev Pozhpluist. The question is not in the code, but in the optimization of the component. But, if this somehow helps you, please, the code above. - Alex

4 answers 4

You can do the following: all that is in the template is set up as a separate component, and called it in the right places, and the data in it passed through props . Example:

 //файл main.vue <template> <div> <my-component :dataComponent="temp"></my-component> </div> </template> <script> import myComponent from './my_component.vue' export default { components: [myComponent], data () { return { temp: { a: 1, b: 2 } } } } </script> //файл my_component.vue <template> <div> {{dataComponent.a}} + {{dataComponent.b}} = 3 </div> </template> <script> export default { props: ['dataComponent'] } </script>

props can read in the documentation

PS: this is a very simplified example.

  • Thanks for the example. Only here the problem is that I see the argument passed to the template. But if I assign the value of the argument to a variable, then when I pass another value in the parameter inside the component, nothing changes. For example: passing `//main.vue <my-component: dataComponent =" selectNavi "> </ my-component> methods: {selectNavi: function (event) {this.naviName = event.currentTarget.innerText; } `In the my_component.vue file , I can output it in the <template> section like this: <p>{{ dataComponent }}</p> - Alex
  • But this code does not show the new value. You can always see the value that was assigned to it during the first rendering: `created: {console.log (this.dataComponent)}` - Alex
  • What you pass to selectNavi is that it should be an object, not a function)) then you will see updates inside the component. - Danil Chugaev
  • I apologize. Passing naviName. That is, the code is: ** <my-component: dataComponent = "naviName"> </ my-component> ** - Alex
  • Maybe the function is called 1 time? If done through v-model , then the value in the child will be uniquely changed. See an example in the documentation about dynamic input parameters - Danil Chugaev

or like this

 <template src="template.html"></template>
    1. Create test.vue component
    2. Import it into main.js
    3. Declare a component

    Vue.component ('classname', test);

    1. In test.vue write the sample code.
    2. In the parent template, declare <classname></classname>

      If webpack is used, the template can be declared in a separate file and then imported:

      template.html

       <div> <h1>Заголовок</h1> <p>текст</p> </div>

      index.js

       import template from './template.html'; export default { name: 'component_name', template }

      Ps. Will require html-loader