vue封装组件（简单入门）

因为接下来的项目准备用vue，而我其实对vue只是半吊子的了解，所以也是在项目正式开始之前努力的学习一下项目需要用到的东西。然后因为这两天在搞tinymce富文本技术预言，所以也是跟着网上的案例半懂不懂的弄出来了，但是对其中封装的组件调用确实很不明白，然后也是在文档和网上似是非是的介绍中搞了一下，所以也是写下来作为学习vue的一个小里程。

1、创建子组件

components/Child/Index.vue

<template> 
   <div class="child-box"> 
    <h3>{{ title }}</h3> 
    <h4>简单数据</h4> 
    <p>{{ pMag }}</p> 
    <p>{{ pExpression }}</p> 
    <h4>对象数据</h4> 
    <p>{{ pObj.msg1 }}</p> 
    <p>{{ pObj.msg2 }}<span>{{ pObjMsg }}</span></p> 
    <h4>数组循环遍历</h4> 
    <ul> 
     <li v-for="item in pArray" :key="item.id"> <p>{{ item.msg }}</p> </li> 
    </ul> 
    <h4>布尔类型</h4> 
    <p v-if="pIsBoolean">当你看见我，说明pIsBoolean是true</p> 
    <p v-else="">当你看见我，说明pIsBoolean是false</p> 
   </div> 
</template>
<script>
export default {
    name: "Child",
    props: ["pMag", "pExpression", "pObj", "pObjMsg", "pArray", "pIsBoolean"],
    data() {
    	return {
            title: "这是子组件"
        };
    }
};
</script>
<style scoped>
li{
    list-style: none;
}
.child-box {
    margin-top: 20px;
}
</style>

2、父组件调用

<template>
    <div>
        <h1>{{ title }}</h1>
        <Child
        	:pMag="msg"
            :pExpression="msgExpA + msgExpB"
            :pObj="msgObj"
            :pObjMsg="msgObj.msg3"
            :pArray="msgArray"
            :pIsBoolean="isMsg"
        >
        </Child>
    </div>
</template>
<script>
import Child from "@/components/Child/Index";
export default {
    name: "Father",
	components: {
        Child
    },
    data() {
        return {
        	title: "这是父组件",
            msg: "父组件传过来的",
            msgExpA: "表达式A,",
            msgExpB: "表达式B",
            msgObj: {
            	msg1: "对象数据",
                msg2: "单一属性：",
                msg3: "属性msg3"
            },
            msgArray: [
            	{
                    id: 1,
                    msg: "props也可以是一个数组"
                },
                {
                    id: 2,
                    msg: "一般结合v-for来循环渲染"
                },
      			{
                    id: 3,
                    msg: "使用v-for时别忘了给key赋值"
                }
             ],
            isMsg: true
        };
    }
};
</script>

3、效果