console
Vue.component("child", {
props: ["message"],
template: "<span>{{ message }}</span>"
})
Vue.component("my-component", {
props: ["text","val"],
template:"<span>{{ text }} {{ val }}</span>"
})
Vue.component("test1", {
props: ["some"],
template: "<span>{{ typeof some }}</span>"
})
Vue.component("test2", {
props: ["some"],
template: "<span>{{ typeof some }}</span>"
})
Vue.component("comp", {
props: ["someProp"],
template: "<span>{{ a }} {{ newVal }}</span>",
data () {
return {
a: this.someProp
}
},
computed: {
newVal: function () {
return this.someProp.push('2')
}
}
})
new Vue({
el: "#app",
data: {
todo: {text:"one",val:"1"},
msg: ['1']
}
})
<div id="app">
<child message="hello"></child><br />
<input type="text" v-model="todo.text" />
<my-component v-bind="todo"></my-component><br />
<test1 some="42"></test1>
<test2 :some="42"></test2><br />
{{ msg }}
<comp :some-prop="msg"></comp>
</div>
html,body{
background-color:#333;
color:#fff;
}