vuecli的属性传值方法1和注册事件

属性传值：
1，传值：比如String，传入的值发生改变，只会作用在发生改变的子组件中
2，传引用：如Array，只发生变动，所用引用该值的地方都会发生变动。

注册事件：
vue不推荐子组件改变父组件中的变量，会报错，想要更改，可以使用注册事件，
如：在子组件中调用一个方法，该方法使用$emit注册事件，事件在父组件中调用：
子组件:

 <div id="header" @click="changeValue">
 
	methods:{
            changeValue(){
                          //注册事件实现 ：第一个参数是事件名，后面的参数是传入的参数
                this.$emit('changeQuote','change App.vue Quote');
            }
        }

父组件：

<header-a @changeQuote="changeQuote" :quote="Quote"></header-a>

像调用click一样调用自己注册的事件，等号右侧给他一个方法名，该方法在父组件中书写，就实现了，合法的，在子组件上操作，影响父组件，（改变了父组件的某一变量的值，所有组件应用到该值的地方，都会相应发生改变）

//注册事件实现 ：第一个参数是事件名，后面的参数是传入的参数，多少都可以
                this.$emit('changeQuote','change App.vue Quote');

App.vue

<script>
    //1,局部调用组件
    import Users from './components/Users.vue'
    import Header from './components/Header.vue'
    import Footer from './components/Footer.vue'
    import APValue from './components/AttributePassingValue'

    export default {
        name: 'App',
        data(){
          return{
              Technology:[{0:'HTML,CSS,JavaScript'},{1:'HTML,CSS,JavaScript'},{2:'HTML,CSS,JavaScript'}],
              Quote:'Custom-Quote',
          }
        },
        components: {
//2，注册组件
//    也可以用 "xxx" = Users，格式写，上面引入就要用<xxx></xxx>，注意命名不能与html标签名重复
            "header-a": Header,
            Users,
            Footer,
            APValue,
        },
        methods:{
            changeQuote(v){
                this.Quote = v;/*因为改变了变量Quote的值，导致所有引用到Quote地方的Quote的值都会发生改变*/
            }
        }
    }
</script>

AttributePassingValue.vue

<template>
    <div id="app" @click="pop">
        <ul v-for="(val,index) in value">
            <li  v-for="(val,index) in val" :key="index">{{ val }}</li>
            <li  v-for="(val,index) in val" :key="index+5">{{ val }}</li>
            <!--      这两个key值不能有重复，=> err      -->
<!--            <li  v-for="(val,index) in val" :key="index+10">{{ val }}</li>-->
        </ul>
        <!--    父组件属性传值有两种类型，传值和传引用，数组等引用类型就是传引用，传入的值都是同一个来自父组件的引用，如果一个发生更改，会影响到其他的地方的引用，
            与传引用不同，传值则不会有影响。-->
    </div>
</template>

<script>
    export default {
        name: "AttributePassingValue",
        // props:['value']
        props: {
            value: Array,//在这定义父组件传入值的类型，类型要一致
            request:true,//这个属性为true表示父组件中必须要传值，默认为false，不传也可以
        },
        data() {
            return {
                val: '',
            }
        },
        methods:{
            pop(){
                this.value.pop();
            }
        },
        computed: {},
        mounted() {
        }
    }
</script>

Header.vue

<template>
    <div id="header" @click="changeValue">
        {{ inner }}{{ quote }}
    </div>
</template>

<script>
    export default {
        name: "Header",
        props:{
            quote:String
        },
        data(){
            return {
                inner : 'Header Component',
            }
        },
        methods:{
            changeValue(){
                //this.quote = "already changed"//在这里改变父组件的值，是会报错的，因为vue不建议子组件改变父组件中的值,想要合法的改变父组件中的值要用到注册事件。
                /*
                * 注册事件：
                * 子组件中注册一个事件，在父组件的自组件调用标签中 @注册事件名 = 在父组件中定义一个方法的名 ，这样想要做的操作由注册的事件调用父组件中定义的方法实现
                * */
                //注册事件实现 ：第一个参数是时间名，后面的参数是传入的参数
                this.$emit('changeQuote','change App.vue Quote');
            }
        }
    }
</script>

Footer.vue

<template>
    <div id="footer">
        {{ inner }}{{ quote }}
    </div>
</template>

<script>
    export default {
        name: "Footer",
        props:{
            quote:String,
        },
        data(){
            return{
                inner:'Footer Component'
            }
        }
    }
</script>