Open MiracleVulkan opened 6 years ago
MiracleVulkan
commented
6 years ago 能够实现表单的输入与应用状态的双向绑定
<div id="app-4">
<p>{{message}}</p>
<input v-model="message">
</div>
var app4 = new Vue({
el:'#app-4',
data:{
message:"hello"
}
})
MiracleVulkan
commented
6 years ago 当需要从父节点那里获取数据时，需要用到”prop“声明属性，父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。
<script>
var childNode = {
template: '<div>{{message}}</div>',
props:['message']
}
var parentNode = {
template:
<div class="parent">
<child message="aaa"></child>
<child message="bbb"></child>
</div>, components: { 'child': childNode } };`
new Vue({
el: '#example',
components: {
'parent': parentNode
}
})
</script>
var childNode = {
template: '<div>{{myMessage}}</div>',
props:['myMessage']
}
var parentNode = {
template:
<div class="parent">
<child :my-message="data1"></child>
<child :my-message="data2"></child>
</div>, components: { 'child': childNode }, data(){ return { 'data1':'aaa', 'data2':'bbb' } } };`[注意]JS中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态
MiracleVulkan
commented
6 years ago 普通组件不能直接使用根实例中的数据
var childNode = {
template:'<div ><img v-for="(item,index) in items" :src="item.imgUrl"></div>',
props:['items']
}
var parentNode = {
template:'<div><child :items="items"></child></div>',
components:{'child':childNode},
}
var temp = new Vue({
el:'#app',
components:{
'parent':parentNode
},
data: function () {
return {
items: [
{imgUrl:"./image/01.jpg"},
{imgUrl:"./image/02.jpg"},
{imgUrl:"./image/03.jpg"},
{imgUrl:"./image/04.jpg"},
]
}
},
})
这时会出现问题，提示items未定义之类的问题，这时的解决方案可以是将item转移到parentNode组件里去
var childNode = {
template:'<div ><img v-for="(item,index) in items" :src="item.imgUrl"></div>',
props:['items']
}
var parentNode = {
template:'<div><child :items="items"></child></div>',
components:{'child':childNode},
data: function () {
return {
items: [
{imgUrl:"./image/01.jpg"},
{imgUrl:"./image/02.jpg"},
{imgUrl:"./image/03.jpg"},
{imgUrl:"./image/04.jpg"},
]
}
},
}
var temp = new Vue({
el:'#app',
components:{
'parent':parentNode
},
})
构造 Vue 实例时传入的各种选项大多数都可以在组件里使用。只有一个例外：data 必须是函数
v-on
添加一个事件监视器，调用实例中的方法
<div id="app-5"><p>{{ message }}</p><button v-on:click="reverseMessage">逆转消息</button></div>var app5 = new Vue({el: '#app-5',data: { message: 'Hello Vue.js!' },methods: {reverseMessage: function () {this.message = this.message.split('').reverse().join('')}}})