vue组件怎么写，vue组件介绍-励北网

vue组件怎么写，vue组件介绍

五、组件中的data

组件可以有自己的data数据

组件中的data必须是一个方法，这样方法内部还必须返回一个对象才行

组件中的data数据使用方式和实例中的data使用方式完全一样

vue组件怎么写，vue组件介绍

六、模板的分离写法

vue提供了两种方案来定义HTML模块内容：

使用<script>标签
使用<template>标签

// 方式一<template id="tmp"> <div> <h1>212</h1> <h2>{{msg}}</h2> // 无法访问data中的msg,会报错</div></template>// 方式二<script type="text/x-template" id="tmp"> <div> <h1>212</h1> <h2>{{msg}}</h2>// 无法访问data中的msg,会报错 </div></script><script> var vm = new Vue({ el: "#app", data: { msg: "小七", }, components:{ 'my-com':{ template:'#tmp' } } });</script>

七、组件内部可以访问Vue实例数据吗？

答案：不能，Vue组件应该有自己保存数据的地方。

组件是一个单独功能模块的封装，这个模块有属于自己的HTML模板，也应该有属于自己的数据data

组件中的数据是保存在哪里呢？顶层的Vue实例中吗？

组件对象也有一个data属性
只是这个data属性必须是一个函数
这个函数返回一个对象，对象内部保存着数据

八、为什么组件data必须是函数

根实例对象data可以是对象也可以是函数（根实例是单例），不会产生数据污染情况
组件实例对象data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染
对象为引用关系，当复用组件时，由于数据对象都指向同一个data对象，当在一个组件中修改data时，其他重用的组件中的data会同时被修改，但是使用返回的对象的函数，由于每次返回的都是一个新对象，保障了引用地址不同，则不会出现修改同一个数据的问题
js只有函数构成作用域（注意理解作用域，只有函数的{}构成作用域，对象的{}以及if(){}够不构成作用域），data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，不会相互影响

<body> <div id="app">  <cpn></cpn>  <cpn></cpn> </div> <template id="tmp"> <div> <p>{{counter}}</p> <button @click="counter++">+</button> <button @click="counter--">-</button> </div> </template> </body> <script> Vue.component("cpn", { template: "#tmp", data() { return { counter: 0, } }, }) var vm = new Vue({ el: "#app", data: {}, })</script>

九、父子组件通信

子组件是不能直接访问父组件或者Vue实例数据的。那么如何把父组件的数据传递给子组件？通过props向子组件传递数据，首先说下props基本用法：

在子组件中，使用选项props来声明需要从父级接收到的数据。

1、props的值有两种方式：

方式一：字符串数组，数组中的字符串就是传递时的名称。

方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。

<body><div id="app"> <cpn :msg="message"></cpn></div><template id="tmp"> <div> <p>{{counter}}</p> <p>{{msg}}</p> </div></template></body><script>var vm = new Vue({ el: "#app", data: { message: "父组件的数据", }, components: { cpn: { template: "#tmp", props: ["msg"], data() { return { counter: 0, } }, }, },})</script>

2、props属性名规则