Vue.js(四)

vue

组件

组件是可复用的 Vue 实例,且带有一个名字:在这个例子中是 <button-counter>。

我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用。

// 定义一个名为 button-counter 的新组件

Vue.component('button-counter',{

data: function () { //一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝

return {

count: 0

}

},

template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'

});

<div>

<button-counter></button-counter>

</div>

通过 Prop 向子组件传递数据(传递组件数据)

一个组件默认可以拥有任意数量的 prop,任何值都可以传递给任何 prop。

我们能够在组件实例中访问这个值。

Vue.component('blog-post',{

props: ['title'],

template: '<h3>{{ title }}</h3>'

});

<blog-post title="My journey with Vue"></blog-post>

使用 v-bind 来动态传递 prop(传递 data 数据)

new Vue({

el: '#blog-post',

data: {

posts: [

{ id: 1, title: 'My journey with Vue' },

{ id: 2, title: 'Blogging with Vue' },

]

}

})

<blog-post

v-for="post in posts"

v-bind:key="post.id"

v-bind:title="post.title"> //如果不加v-bind,"post.title"会被当做字符串,而不是表达式

</blog-post>

重构:

<blog-post

v-for="post in posts"

v-bind:key="post.id"

v-bind:post="post">

</blog-post>

Vue.component('blog-post',{

props: ['post'],

template: `

<div>

<h3>{{ post.title }}</h3>

<div v-html="post.content"></div>

</div>

`

});

子组件向父组件传值

new Vue({

el: '#blog-post',

data: {

postFontSize: 1

}

});

<blog-post v-on:enlarge-text="postFontSize += 0.1"></blog-post>

Vue.component('blog-post',{

props: ['post'],

template: `

<div class="blog-post">

<h3>{{ post.title }}</h3>

<button v-on:click="$emit('enlarge-text')"></button>

<div v-html="post.content"></div>

</div>

`

})

父级组件会接收该事件并更新 postFontSize 的值。

子组件向父组件传值-携带参数

   <menu-item :parr='parr' @enlarge-text='big($event)'></menu-item>

Vue.component('menu-item',{

props: ['parr'],

template: `

<div>

<ul>

<li :key='index' v-for='(item,index) in parr'>{{item}}</li>

</ul>

<button @click='$emit("enlarge-text", 5)'>扩大父组件中字体大小</button>

</div>

`

});

var vm = new Vue({

el: '#app',

data: {

parr: ['apple','orange','banana'],

fontSize: 10

},

methods: {

big: function(val){

// 扩大字体大小

this.fontSize += val;

}

}

});

通过插槽分发内容

<alert-box>

Something bad happened.

</alert-box>

Vue.component('alert-box',{

template: `

<div>

<span>Error!</span>

<slot></slot>

</div>

`

});

以上是 Vue.js(四) 的全部内容, 来源链接: utcz.com/z/380737.html

回到顶部