Vue组件

Posted 2021-03-22 huronghua

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue组件相关的知识，希望对你有一定的参考价值。

Vue组件

组件概念：web中的组件其实就是页面组成的一部分，它是一个具有独立的逻辑和功能或界面，同时又能根据规定的接口规则进行相互融合，变成一个完整的应用。

特征：高内聚，低耦合。

优点： 1、提高开发效率

　　　2、方便复用

　　　 3、简化调用步骤

　　　 4、提升整个项目的可维护性

组件的命名：

Vue.component("my-component-name",{}）

具体实例：

<body>

</div>
?????
??????
<div id="app2">

<test>

</test>

</div>

//全局组件

Vue.component(‘test‘, {

// 模板

<div>

<ul>

<li>apple</li>

<li>banana</li>

</ul>

<button @click="changeName">change name</button>

</div> `,

// 数据

data: function () {

return { name: ‘xiejie‘ } },

//方法

methods: {

changeName: function () {

this.name = ‘yajing‘ } } });

new Vue({ el: ‘#app1‘ });

new Vue({ el: ‘#app2‘ });

</script>

</body>

局部组件：

new Vue({

el: ‘#app‘,

components: {

‘component-a‘: ComponentA,

‘component-b‘: ComponentB

} })

Props:父组件通过props向下传输数据给子组件，子组件通过events给父组件发送消息。

例：

</div>

Vue.component(‘test‘, {

props: {

content:Number

template:

` <div>

<p>传递过来的值：{{content}}的类型为{{typeof content}}</p>

</div>`

})

let app1 = new Vue({

el: ‘#app1‘,

data:{

inputEle: ‘‘

}

})

父子组件之间通信：

</partent>

</div>

// 父组件

Vue.component(‘partent‘, {

template:

` <div>

<p>{{total}}</p>

</div>` ,

data() {

return { ‘total‘: 0 }

methods: {

count(newValue){

this.total=newValue;

}

})

// 子组件

Vue.component(‘child‘, {

template:

` <div>

</div>`,

data() {

return { counter: 0 }

methods: {

reduce(){

this.counter--;

// $emit()触发一个事件

this.$emit(‘childcount‘,this.counter);

add(){

this.counter++;

this.$emit(‘childcount‘,this.counter);

}

})

let app = new Vue({

el: ‘#app‘,

})

非父子组件之间通信：（创建一个中间商）

<com-1></com-1>

<com-2></com-2>

</div>

let bus = new Vue(); // 中间商

Vue.component(‘com-1‘, {

template:

` <div>

<p @click=‘pEle‘>组件1{{count}}</p>

</div>` ,

data() {

return { count: ‘数据‘}

methods: {

pEle() {

bus.$emit(‘shuju‘, this.count)

}

})

Vue.component(‘com-2‘, {

template:

` <div>

<div>组件2{{count2}}</div>

</div>` ,

data() {

return { count2: ‘‘ }

mounted() {

bus.$on(‘shuju‘, (value) => {this.count2= value});

}

})

let app = new Vue({

el: ‘#app‘

})

父链：在子组件中，用this.$parent能直接访问该组件的夫实例，或组件。

父组件也能用this.$children访问它所有的子组件。

例：

this.$parent访问父组件

<body>

<p>当前父组件的数据为：{ message }}</p>

</div>

Vue.component(‘com‘, {

methods: { handleEvent: function () {

//访问到父链后，可以做任何操作，比如直接修改数据

this.$parent.message = ‘来自组件com的内容; } } });

const app = new Vue({

el: ‘#app‘,

data: { message: ‘this is a test‘ } });

</script>

</body>

this.$children访问子组件

例：

<body>

<p>当前数据为：{{ name }}</p>

<button @click=‘getComValue‘> 获取子组件的数据</button>

</div>

Vue.component(‘com‘, {

<p>{{ message }}</p> `,

data: function () {

return { message: ‘这是子组件的数据‘ } } });

const app = new Vue({

el: ‘#app‘,

data: { name: ‘this is a test‘ },

methods: { getComValue() {

// this.$children 会获取所以的子组件，所要加上下标第一个子组件

this.name = this.$children[0].message; } } });

</script>

</body>

以上是关于Vue组件的主要内容，如果未能解决你的问题，请参考以下文章