<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>
<div id="app">
<input type="text" v-model="msg">
<!-- :cmovies="movies"：父传子之传值 -->
<!-- @item-click="itemClick"：接收子组件通过自定义事件传过来的值（子传父亲） -->
<!-- ref="c" 组件标识，利于得到该子组件实例对象 -->
<cpn ref="c" :cmovies="movies" @item-click="itemClick"></cpn>
</div>
<!-- 子组件模板 -->
<template id="cpn">
<div>
<h1>从父组件传过来的值:</h1>
<ul>
<li v-for="item in xmovie" @click="clickmovie(item)">{{item}}--点我传值至父组件>></li>
</ul>
</div>
</template>
<script>
// 子组件
const cpn = {
// 引用模板
template : "#cpn",
// props 父传子之接收
// props: ["cmovies"],
props : {
cmovies :{
// 限定类型
type:Array,
// 默认值(父组件未传值)
default(){
// 这里为什么要用工厂函数？思考下，当限定类型为Object或Array时会报错
return ['不能说的秘密','头文字D'];
},
}
},
data(){
// 又是工厂函数，为什么和vue实例data的定义有别?多个vue组件，如果不用工厂函数的话，各个vue实例对象的属性会引用混乱
return {
// 将父组件传过来的值放到data里面，变成自己的属性（拓展性，不然不允许修改）
xmovie : this.cmovies
};
},
methods: {
clickmovie (item){
console.log("子组件点击",item)
// 将点击事件转成自定义事件传给父组件
// emit:发射
console.log("值通过自定义事件发射至父组件")
this.$emit('item-click',item);
}
},
mounted(){
console.log("cpn子组件挂载完毕，根组件root对象：",this.$root)
}
}
// 父组件，在这里父组件是vue实例
const app2 = new Vue({
el: "#app",
data: {
// 准备传给子组件的值
movies: ['海王','海贼王'],
msg:"watch实时监测",
},
/*注册组件*/
components:{
cpn,
},
methods:{
itemClick(item){
console.log("父组件接收",item);
}
},
// watch:实时监测属性值的改变
watch:{
msg(newVal,oldVal){
console.log("watch实时监测更新数据，新数据：",newVal)
}
},
mounted (){
// this.$refs 所以的子组件
// this.$refs.c 子组件中 设置了ref属性值为c的内个组件
console.log("vue实例挂载完毕，有一个子组件，实例对象为：",this.$refs.c)
}
})
</script>
</body>
</html>
