In my project, I have 3 main Components that are crucial for the functionality: Component 1 serves as the Top Menu, Component 2 is like a library containing various functions, and Component 3 houses the main code.
My goal is to utilize a method from Component 2 within Component 1 while also incorporating attributes from Component 3. Additionally, I aim to integrate Component 1 into Component 3.
// Component 1 Top Menu
Vue.component('component1', {
props: {
titleTest: {
type: String,
required: true
},
textTest: {
type: String,
required: true
}
},
template: `
<div>
<div :title="titleTest">{{ titleTest }}</div>
<div :data-test="textTest">{{ textTest }}</div>
<button id='test' type="submit" @click="bar">TestButton</button>
</div>
`,
created() {
console.log('Created1');
this.$root.$refs.component1 = this;
},
methods: {
//alertText should be passed from Component 3
bar: function(alertText) {
console.log(alertText);
this.$root.$refs.component2.foo(alertText);
}
}
});
// Component 2 Lib
Vue.component('component2', {
created() {
this.$root.$refs.component2 = this;
},
methods: {
foo: function(alertText) {
alert('this is component2.foo' + alertText);
}
}
});
// Component 3 Main Code
Vue.component('component3', {
template: `
<div>
<div>Some text</div>
<ul>
<li>List Item1</li>
<li>List Item2</li>
</ul>
<div>
<component1 ref="component1" :title-test="test1" :text-test="test2"></component1>
</div>
</div>
`,
data: function() {
return {
test1: 'testText1',
test2: 'testText2',
alertText: 'alertText'
};
},
created: function() {
}
});
new Vue({
el: '#plotlyExample',
});
I am unsure if this setup is feasible, as I attempted using "emits" without success.