<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<template id='cpn'>
<div>
<h4 v-html="cmessage"></h4>
<ul>
<li v-for="item in cmovies">
{{item}}
</li>
</ul>
</div>//
<Script>
</ div>are used which bind the variable to receive the value of the variable which//
<div ID = 'App'>
</ Template>
<cpn: cmovies = 'movies'
subassembly
const CPN = {
// external template
Template: '#cpn' ,
// declare these variables to receive the value of parent element pass
The props: [ 'cmovies', 'cMessage' ],
Data () {
return {
}
}
}
const VM = new new Vue ({
EL: '#app' ,
data: {
Message: '! watching movies ah <br/> here is my parent component brought from the movie data!' ,
Movies: [ 'Rebels', 'Spirited Away''A dream', 'Spider' ]
}
// Register subassembly
Components: {
CPN
}
})
</ Script>
</ body>
</ HTML>
