7、Vue 组件-props属性，$refs和$parent

1、简单Vue组件

1. 每一个.vue文件都是一个组件，包括模板template，业务逻辑 script 和样式style
2. Vue项目的每个应用都是一个个小组件组成的，比如根组件、Home组件、Head组件和菜单组件等等
3. 使用其他组件时，首先引用组件到当前组件中，其次在当前组件中注册需要的组件
   

1.1、根组件 案例 App.vue

<template>
  <div>
    {{rootTitle}}
    <home/>
    <v-home/>
  </div>
</template>

<script>
// 1、引入组件
import Home from './components/Home.vue'

export default {
  data(){
    return {
      rootTitle:"这里是根目录"
    }
  },
  // 2、注册组件
  components: {
    Home,
    'v-home':Home
  }
}
</script>

1.2、Home组件案例 Home.vue

<template>
    <div>
        {{homeTitle}}
    </div>
</template>

<script>
export default {
    data() {
        return {
            homeTitle: '这里是Home组件'
        }
    },
}
</script>

2、父组件向子组件传递参数–props属性

1. 子组件中定义props属性，这个属性不能在data()里面定义
2. 父组件通过 :props属性 可向子组件传递数据
3. 可传递父组件的data数据及 父组件实例 对象
4. props属性可校验，数据类型，格式，默认值等操作
5. props属性值 子组件不可修改，也就是props数据传递是单向的，不可修改值传递到父组件中。控制台报异常

2.1、父组件案例 Father.vue

<template>
    <div>
        {{title}}
        <br>
        <br>
        <!--myData:子组件定义的属性，父组件传参；
        father:子组件定义的属性，传递父组件实例数据-->
        <child :myData="cData" :father="this" />
    </div>
</template>

<script>
import Child from './Child.vue'

export default {
    
    data() {
        return {
            title: '这里是父组件',
            cData: 123,
            users:[
                {name:'zyk'},{name:'jake'},{name:'hongying'}
            ]
        }
    },
    components:{
        Child,
    }
}
</script>

2.2、子组件案例 child.vue

<template>
    <div>
        {{childTitle}}

        <br/>
        <br/>
        <span>父组件传递的子组件数据：{{myData}} </span>

        <br>
        <br>
        <!---接收父组件整个实例对象，可访问父组件所有数据及方法-->
        <ul>
            <li v-for="(item,index) in this.father.users" :key="index">{{item.name}}</li>
        </ul>
        <br>
        <br>
        <button @click="modifyData">修改props属性</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            childTitle: '这里是子组件',
        }
    },
    //1、父组件向子组件传参用属性；myData属性在data() 里面不能定义；获取父组件实例数据
    //props:['myData','father']
    //2、props 传递的数据校验
    props: {
        myData: {
            //如果传递的数据类型不是Number类型时，控制台有警告报错信息提示
            type: Number,
            required: true,
            default: 100
        },
        father: {
            type: Object
        }
    },
    methods: {
        modifyData (){
            //3、props 数据流是单向传递的，不允许子组件修改，控制台报异常信息
            this.myData=456;
        }
    },
}
</script>

3、父子组件相互间访问-$refs和$parent

父组件可以访问子组件的数据、方法，及修改子组件数据；
子组件可以访问父组件的数据、方法，及修改父组件数据；

1. 父组件在使用子组件时，定义ref属性 <header ref="header />
2. 父组件可以通过$refs.header 访问到子组件实例(之前通过ref访问DOM元素原理一样)
3. 子组件可以通过$parent访问父组件实例对象，并且可以调用父组件方法，修改父组件数据等。此时不像props属性，修改报错。
4. this.$refs.ref属性名 获取子组件实例
5. this.$parent 获取父组件实例

3.1、父组件案例 MyF.vue

<template>
    <div>
        {{title}}

        <br>
        <button @click="getChildData">获取子组件数据</button>
        <button @click="runChildFun">调用子组件方法</button>
        <button @click="modifyChildData">修改子组件数据</button>
        <br>
        <my-c ref="myc"/>
    </div>
</template>

<script>
import MyC from './MyC.vue'
export default {
    data() {
        return {
            title: '这里是父组件'
        }
    },
    methods: {
        getChildData () {
            alert(this.$refs.myc.title);
        },
        runChildFun () {
            this.$refs.myc.say();
        },
        modifyChildData () {
            this.$refs.myc.title="父组件修改子组件title";
        },
        say(){
            alert('调用父组件方法')
        }
    },
    components:{
        MyC
    }
}
</script>

3.2、子组件案例 MyC.vue

<template>
    <div>
        {{title}}
        <br>
         <br>
        <button @click="getParentData">获取父组件数据</button>
        <button @click="runParentFun">调用父组件方法</button>
        <button @click="modifyParentData">修改父组件数据</button>
        <br>
        <br>
    </div>
</template>

<script>
export default {
    data() {
        return {
            title: '这里是子组件'
        }
    },methods: {
        getParentData () {
            alert(this.$parent.title);
        },
        runParentFun () {
            this.$parent.say();
        },
        modifyParentData () {
            this.$parent.title="子组件修改父组件title";
        },
        say(){
            alert('调用子组件方法-哈哈')
        }
    },
}
</script>