If the value passed in prop is a variable that does not use special naming rules such as: (type), the value can be passed smoothly:
<code class="language-html"><div >
<test :type="type"></test>
</div>
("test", {
props: ['type'],
template: '<div @click="a">I'm the button{{type}}</div>',
methods: {
a() {
();
}
}
});
var app = new Vue({
el: '#app',
data: {
type: 'test'
}
});</code>
And when this variable is a camel nomenclature such as: (selectName), it will not be passed:
<div >
<test :selectName="selectName"></test>
</div>
("test", {
props: ['selectName'],
template: '<div @click="a">I'm the button{{selectName}}</div>',
methods: {
a() {
();
}
}
});
var app = new Vue({
el: '#app',
data: {
selectName: 'test'
}
});
The solution is to change the selectName tag to select-Name:
<div >
<test :select-Name="selectName"></test>
</div>
("test", {
props: ['selectName'],
template: '<div @click="a">I'm the button{{selectName}}</div>',
methods: {
a() {
();
}
}
});
var app = new Vue({
el: '#app',
data: {
selectName: 'test'
}
});
Summarize:If you pass the camel name method, the html is case-sensitive (all will be converted to lower case), so the testName is represented by: test-name in html. It should be noted that it is best not to use horizontal bars such as select-name when passing in vue, because when using the horizontal bars in -name will be considered a minus sign, which will not be recognized. When defining events, it is best to name them in lowercase, such as
this.$emit("selectchange","data");
Don't write it
this.$emit("selectChange","data");
The better way is to recognize the html.
this.$emit("select-change","data");
The above article vue props failed to transmit value and output undefined is all the content I share with you. I hope you can give you a reference and I hope you support me more.