<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>Title</title>
? ? <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<div id="app">
? ? <!--父組件，可以在引用子組件的時(shí)候，通過(guò)屬性綁定（v-bind:）的形式，把需要傳遞給子組件的數(shù)據(jù)以屬性綁定的形式傳遞到子組件內(nèi)部，供子組件使用-->
? ? <son v-bind:parentmsg="msg"></son>
</div>
<script>
? ? var vm=new Vue({
? ? ? ? el:"#app",
? ? ? ? data:{
? ? ? ? ? ? msg:'這是父組件中的數(shù)據(jù)'
? ? ? ? },
? ? ? ? components:{
? ? ? ? ? ? //子組件中默認(rèn)無(wú)法訪問(wèn)到父組件中的data上的數(shù)據(jù)和methods中的方法
? ? ? ? ? ? son:{
? ? ? ? ? ? ? ? //子組件中的data數(shù)據(jù)，并不是通過(guò)父組件傳遞過(guò)來(lái)的，而是子組件自己私有的，比如：子組件通過(guò)AJAX，請(qǐng)求回來(lái)的數(shù)據(jù)，都可以放到data身上；
? ? ? ? ? ? ? ? data(){
? ? ? ? ? ? ? ? ? ? return{
? ? ? ? ? ? ? ? ? ? ? ? title:'一二三',
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? //注意：組件中的所有props中的數(shù)據(jù)，都是通過(guò)父組件傳遞給子組件的
? ? ? ? ? ? ? ? //把父組件傳遞過(guò)來(lái)的parentmsg屬性，先在props數(shù)組中，定義一下，才能使用這個(gè)數(shù)據(jù)
? ? ? ? ? ? ? ? //props中的數(shù)據(jù)都是只讀的，無(wú)法重新賦值，而data中的數(shù)據(jù)都是可讀可寫的
? ? ? ? ? ? ? ? props:['parentmsg'],
? ? ? ? ? ? ? ? template:"<h1 @click='change'>這個(gè)是子組件----{{parentmsg}}</h1>",
? ? ? ? ? ? ? ? methods:{
? ? ? ? ? ? ? ? ? ? change(){
? ? ? ? ? ? ? ? ? ? ? ? //此操作不可以，因?yàn)閜rops里面的數(shù)據(jù)是只讀的
? ? ? ? ? ? ? ? ? ? ? ? this.parentmsg="修改";
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? })
</script>
</body>
</html>
